So I've read a few posts on stackoverflow and my site's not reacting very well.
My site: http://funnykittenmemes.com/
You can view the source code and Firebug to see the css and javascript I am using. I'm trying to get the floating bar (below the ad) to stay in fixed position, BUT when a user scrolls down, the bar should stay in place at the top of the pace. So it stays in place only until a user scrolls down.
I'm trying to use this code: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/
No idea what's wrong. Right now, the bar sticks but it sticks in the same position that it was originally on the site (you can see a space above the bar as you scroll down). It doesn't stick to the top of the page.
Apparently, this post is "too localized" so here's the code:
In my header file
(before the end head tag)
<script src="/waypoints/shortcuts/sticky-elements/waypoints-sticky.min.js"></script>
<script src="/waypoints/waypoints.js"></script>
(after the end head tag)
<header class="header-bar">
floating bar code here
</header>
In my footer file
(before the end body tag)
<script type="text/javascript">
$(document).ready(function() {
$('.header-bar').waypoint('sticky');
});
</script>
CSS
header {
height:40px;
background-color: #222222;
padding:0pt;
min-width: 1060px;
height:50px;
border-top: 1px solid #333;
border-bottom:1px solid #000;
box-shadow: #000000;
width: 100%;
z-index: 999;
position: fixed;
}
.header-below {
background-color: #000;
color: #fff;
height: 180px;
border-top: 1px solid #333;
}
.header-bar.stuck {
height:40px;
background-color: #222222;
padding:0pt;
min-width: 1060px;
height:50px;
border-top: 1px solid #333;
border-bottom:1px solid #000;
box-shadow: #000000;
width: 100%;
z-index: 999;
position: fixed;
}
The header-below attribute is for the area below the floating bar.
UPDATE: Got it working.
Changed the .header-bar.stuck css attribute property to this:
.header-bar.stuck {
position:fixed;
top:0;
box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
Moved the scripts to the footer file right above the $(document) code
Removed the "min" from "min.js". Didn't need the "min".
Took me a while to notice but that's what I did. Make sure that the floating bar has a class and is inside the $(document) code. The CSS and javascript have to match up. And make sure you call the right js file in your code. You can take a look at my source code if you need to :)
Changed the .header-bar.stuck css attribute property to this:
.header-bar.stuck {
position:fixed;
top:0;
box-shadow:0 2px 4px rgba(0, 0, 0, .3);
}
Moved the scripts to the footer file right above the $(document) code. Removed the "min" from "min.js". Didn't need the "min".
Took me a while to notice but that's what I did. Make sure that the floating bar has a class and is inside the $(document) code. The CSS and javascript have to match up. And make sure you call the right js file in your code. You can take a look at my source code if you need to :)
Related
This will be a question that is hard to exmplain but please keep an open mind.
My experiment:
I have a div that contains some content and this div is hidden on load.
So now i have an element that when it is clicked shows the content of the div.
What I want:
I want to create a underline that has a small falling down break in the middle and when i click on this it will give me the desiered show/hide effect.
My css skills are nothing to brag about and I honestly dont even know where to start.
Image that might clarify:
How do I do this?
If you don't need to support older browsers you can create a triangle with borders like so:
.nav-item::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
}
obviously would need moving about to fit where you want it.
If you need to support older browsers however, you can just absolutely position a triangle image to appear under the nav item.
try this
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.class:after{
content:"";
border:10px solid transparent;
border-top-color:red;
}
I am trying to make a div container expand and contract every time an even handler is clicked.
However, every time I load the page, I have to click the even handler twice to expand it for the first time, after that it works with one click but I would like to only click it once to get it to expand upon page reload.
CSS:
#bodywrap1{
border-radius: 5px;
height: 00px ;
width: 80% ;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
Javascript:
function expand(){
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
HTML:
<h2 onclick = "expand()" id = "expandv">Expand</h2>
Here is the site im working on, and the page specifically.
http://hourtimeagent.com/html/c++.php
Toggle works based on the display property, so set the display: none to the bodywrap1
When the first click happens, since the display is not set, instead of displaying the element toggle() hides it, to fix it set
#bodywrap1 {
border-radius: 5px;
height: 0;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0, 0, 0, 0.3);
border-bottom: solid 2px rgba(0, 0, 0, 0.3);
/*new property*/
display: none;
}
The reason it's taking two clicks is because the .toggle hides the #bodywrap1, and then on second click it shows the #bodywrap1 and animates the height.
I fixed this by using .toggleClass instead and changed some things around with the css
http://jsfiddle.net/PUCLM/1/
HTML
<h2 id="expandv">Expand</h2>
<div id="bodywrap1">
</div>
CSS
#bodywrap1{
border-radius: 5px;
height: 0px;
width: 80%;
overflow: hidden;
border-top: solid 2px rgba(0,0,0,0.3) ;
border-bottom: solid 2px rgba(0,0,0,0.3) ;
background: blue;
}
#bodywrap1.theclass {
height: 600px;
}
jQuery UI (you can only animate height with jQuery UI, not plain jQuery)
$('#expandv').click(function() {
$("#bodywrap1").toggleClass('theclass', 500);
});
Your html is not correctly written, remove from <head> tags h1 and h2.
<head>
<link rel="stylesheet" type="text/css" href="../css/c++.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<h1>C++</h1>
<h2 id = "expandv">Expand</h2>
<h1>Variables</h1>
<!-- ... -->
Change your javascript for the following:
$(function() {
function expand() {
$("#bodywrap1").toggle(function(){
$("#bodywrap1").animate({height:600},200);
});
}
// Click function for #expandv item
$("#expandv").on("click", function() { expand(); });
// Initialize a hidden wrap
$("#bodywrap1").css("display", "none");
});
Working jsfiddle: http://jsfiddle.net/TFZ4R/
LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}
Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.
Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}
I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/
How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)
Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}
There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.
The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.
Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.
The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.