I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
Related
I noticed that when I scroll upwards fast in Safari, the sticky nav jumps around, then I have to scroll slowly again to get it to click back into it's proper place. I'm using Foundation 6. Also, this is a new issue, as everything used to work just fine in Safari, but something must have changed in the past 4 months or so. See below for an example of the issue.
Here's the HTML for the nav bar. I haven't done anything special with the CSS.
<nav class="top-bar-container hide-for-small-only" data-sticky-container>
<div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
<div class="top-bar">
<div class="wrap">
<div class="top-bar-left">
<ul class="menu menu-hover-lines" data-magellan>
<li><a class="menu-options" href="home">Home</a></li>
<li><a class="menu-options" href="projects">Projects</a></li>
<li><a class="menu-options" href="articles">Articles</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
The issue only arises in Safari. Chrome, etc. everything works fine. Has anyone else had this problem? Any help is appreciated.
Had the same problem. I added an id to the body tag and then anchored the top container to it.
<body id="the-body">
<div data-sticky-container>
<div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
<div class="top-bar topbar-sticky-shrink" id="top-menu">
<div class="top-bar-title">
NAME
</div>
<div class="top-bar-right">
<ul class="menu" data-magellan>
<li>FIRST</li>
<li>SECOND</li>
<li>THIRD</li>
</ul>
</div>
</div>
</div>
</div>
I recently started to learn CSS and HTML and I am doing a front page for exercise. However, the browser is overriding and turning my other elements (in different div) into links. I tried CSS to solve it, nothing worked. I removed all CSS and it still is the same.
The container div and all the elements inside it is are now links and when I click, it tries to redirect to hrf.html page.
Can you please tell me where I am doing a mistake?
Elements in container div in the dev tool have this code:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Conquer</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li><a href="hrf.html">Homepage</li>
<li><a href="hrf.html">About Us</li>
<li><a href="hrf.html">Services</li>
<li><a href="hrf.html">Contact</li>
<li><a href="hrf.html">External</li>
</ul>
</div>
</div>
<div class="container">
<div class="first-sec">
<div class="first-img">
<img src="image1.jpg" alt="image">
</div>
<div class="heading">
<h1>CONQUER</h1>
<h2>Simple Website Design</h2>
</div>
</div>
</div>
</body>
</html>
it is necessary to close the tags properly otherwise there scope will disturb effects of other tags too..here in your code you forget to close <a> anchor tags thats why its become worry for you..try this
<div class="nav">
<div class="nav2">
<ul class="navlist">
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
</ul>
</div>
</div>
Best of luck ahead
This is because you haven't closed any <a> tag. You must close it or else you will face same issue.
<li>Homepage</li>
Follow this practice in all <li> elements.
That should fix your code. Let me know.
you haven't closed the anchor tags inside your "navlist" class.
<li>Homepage</li>
<li>About Us</li>
<li>Services</li>
<li>Contact</li>
<li>External</li>
try this..
I am working on a mobile web app and have different seperated pages and some with multipages inside.
The footer contains links to the external pages. When im trying to put an anchor link, it wont work. Any solution?
Here are the codes for my footer and my anchor
<div data-role="footer" data-position="fixed" data-id="myfooter">
<div data-role="navbar" id="mainnavbar">
<ul>
<li><a rel="external" href="home.html" class="ui-btn-active ui-icon-fa"><img src="../img/icons/home#2x.png"></a></li>
<li><a rel="external" href="search.html" ><img src="../img/icons/lista#2x.png"></a></li>
<li></li>
<li><a rel="external" href="location.html"><img src="../img/icons/location#2x.png"></a></li>
<li><a rel="external" href="settings.html" ><img src="../img/icons/profile#2x.png"></a></li>
</div>
</div>
Anchor code:
<div role="main" class="ui-content">
<div id="logo">
<img src="../img/LogoSF.png" style="text-align:center" height="auto" width="60%">
</div>
<div id="contenido">
<h1> Bienvenido a Chooser </h1>
<p> Estas a 10 preguntas de encontrar tu plan ideal. </p>
<div id="continuar">
A
</div>
</div>
any solutions?
If you want to disable the ajax link behaviour from an anchor tag, you can put rel=external in the link and the link will load without ajax and your url will then be usual.
http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
like :
<a href="User/somepage" rel="external" />I wont be using ajax for navigation</a>
and here is solution using jquery
$(function(){
$(".content a").each(function(){
$(this).attr("rel","external");
});
});
Getting some off behaviour with my Bootstrap horizontal navigation, for some reason it seems to be adding an extra anchor link into the first <li><!-- here --></li> element.
Code:
<li class='submenu'>
<a href='#'>
<img src='{{ URL::asset('img/menu/performance.png') }}' /> Performance
<ul class='nav'>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
<li><a href='#'>abc</a></li>
</ul>
</a>
</li>
What Chromes Inspector says:
<li class="submenu">
<a href="#">
<img src="https://xxxxxx/img/menu/performance.png"> Performance
</a>
<ul class="nav" style="display: block;"><a href="#">
</a><li><a ref="#">abc</a></li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
Any one got an idea's of why this is happening? I hacky fixed it with the following CSS:
.left-nav .submenu li:nth-child(2) > a:first-child {
display:none;
}
You should not have any links inside another link.
This is not valid HTML.
If the browser encounters a link tag while already inside a link tag it will add
the closing tag for the first link.
I was using links within links, causing this to happen. I have moved the secondary <ul> outside of the anchor tab and its now working.
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)