I have a webpage which initially looks like this.
When clicked upon a link, a small form appears to the right side of the page.
The problem is when that happens that line which reads Record added also moves to the middle.
These are the CSS rules I've written to position them.
#frmAddService { float:right; padding-right:250px; padding-top:150px; } //the form
#msg { float:right; padding-right:250px; padding-top:300px; } //the 'Record Added' line
How can I make that line's position fixed when the form appears?
Thank you.
Cool thank for the link, that help :)
I created a new div and add your form and your msg in it. that way, if one move both move.
And I put the id, formContainer.
here is the CSS
#formContainer{width:350px; float:right;padding-right:250px;}
#frmAddService {position: relative; float:right;padding-top:300px;}
#msg { position:relative; float:right; padding-top:300px; }
#tasks { float:left; padding-left:40px; padding-top:100px; }
I also moddify your Jquery to change the value of your #msg
$(function()
{
$("#frmAddService").hide();
$("#add").click(function()
{
$("#frmAddService").fadeIn("slow");
$("#msg").css("padding-top","0px");
$("#msg").css("margin-top","10px");
$("#msg").css("padding-right","100px");
return false;
});
});
and this mostly it as you can see in http://jsfiddle.net/PJVu6/29/ it work fine.
Related
I am using wordpress site. I created menu bar, inside of sub-menu, used position:fixed element. Anybody tell me how can i disable mousewheel inside of that sub-menu. That means i don't want page scroll inside of that sub-menu.
Please anyone help me.
You can use CSS property overflow: hidden; which specifies what happens if content overflows an element's box.
Using overflow: hidden; allow you to do not show up the scroll bar and so do not allowing scrolling at all including mouse weal.
Here below a very generic example, please consider to add your real markup in your question for a fix on your real app code.
https://jsfiddle.net/bxohL8tt/2/
#sub-menu{
width:250px;
height: 100px;
background-color:red;
overflow: hidden;
}
If the element that is scrolling on mouse-wheel event is the body, or even some other element, you can use JavaScript to prevent it from scrolling while your menu has "focus" like this:
var menuBar = document.getElementById('menuBar');
menuBar.onmouseover = function()
{
document.body.style.overflow = 'hidden';
};
menuBar.onmouseout = function()
{
document.body.style.overflow = 'auto';
};
Add the above inside a <script> element at the end of your main HTML source-code and it should work.
You can do this by the following code:
$("sub-menu-selector").bind("wheel mousewheel", function() {
return false;
});
For example: (The example shows the disabling on the menu but it's just the same)
$(".menu").bind("wheel mousewheel", function() {
return false;
});
body {
margin:0;
}
.menu {
background:black;
color:#fff;
position:fixed;
width:100%;
padding:15px;
}
.content {
height:1500px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
Menu
</div>
<div class="content"></div>
I am having some trouble with z-index working on a fixed element in safari. I created the scrolling site in firefox and wasn't even needing to specify z-index for the simple text div to be behind the other content until scrolled down to. But for some reason in Safari it shows up in front of everything else. I have tried creating a negative z-index for it and positive z-index for everything else but no change. Here is the code for it.
Thanks for any help!
Also here is the link to view it if that helps make more sense (you have to login to view the site - use username stackoverflow password:stackoverflow
http://lynchbryan.com/wp-login
<div id="tagline">
<span class="tags">We</span><span class="tagl">partner</span> <span class="tags">with clients to</span> </br><span class="tagl">cultivate</span> <span class="tags">the</span> <span class="tagl">potential</span><span class="tags"> of people</span>
</div>
#post-16 #tagline {
position:fixed;
bottom:50%;
text-align: center;
left: 50%;
z-index:-999;
}
#post-16 .tags {
font-family:'AndesLight';
font-size:23px;
color:#ffffff;
padding:0 10px;
}
#post-16 .tagl {
font-family:'ThirstyRoughReg';
font-size:50px;
color:#ffffff;
}
I wouldn't suggest trying to hide something with z-index. Instead you should try display: none;. If that's not the issue you're encountering then I still wouldn't suggest setting a negative z-index value. It's good practice to keep these values at 0 or above. Try setting the z-index of everything else to a higher number like 3 or 4 and then setting #post-16 #tagline to 1 or 2.
EDIT
According to your comments, you want to hide .tags and .tagl. You should do the following CSS rule, ignoring the z-index:
.tags, .tagl { display: none; }
Based off of what you have already. A really simple example would be. You may want to throttle of often the scroll event is called since it will be called a lot.
#post-16 #tagline {
position:fixed;
bottom:50%;
text-align: center;
left: 50%;
display: none;
}
//cache the element so you only need to look it up once.
var $tag = $('#post-16 #tagline');
//name space the scroll event
$(document).on('scroll.show-tagline' function (e) {
//this is how far the document has been scrolled in pixels
var scrolled = $(this).scrollTop();
//what ever value you want
if ( scrolled > 300 ) {
$tag.show();
} else {
$tag.hide();
}
})
I created a flexible button made of three parts.
I made three parts from one picture. I think it is called "sprite" or something
Here is the css.
.commonButtonLeft, .commonButtonContent, .commonButtonRight
{
background-image:url(img/commonbutton.png);
}
.commonButtonLeft
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:left;
width:14px;
}
.commonButtonContent
{
float:left;
height:40px;
background-repeat:no-repeat;
background-position:center;
text-align:center;
}
.commonButtonRight
{
height:40px;
background-repeat:no-repeat;
background-position:right;
width:14px;
float:left;
}
Now I created another picture "commonbutton_onclick.png" for the clicked button.
And I added the following class.
.commonButtonLeft:active, .commonButtonContent:active, .commonButtonRight:active
{
background-image:url(img/commonbutton_onclick.png);
}
It didn't work well.
When I click the area ".commonButtonContent", the area only becomes the active picture.
I want to make all classes to be "commonbutton_onclick.png".
I can not use css3 in this case by the way.
Please help me.
Firstly, if the items are divs, you'll need to use :hover, not :active.
Perhaps but the entire button in a single div (class commonButton). this way you can do something like this. This will cause all 3 divs to change when the container is hovered anywhere, rather than targeting the hovering of a single piece.
Here is a JSFiddle to demonstrate.
.commonButton .commonButtonLeft
{
...
}
.commonButton .commonButtonRight
{
...
}
.commonButton .commonButtonContent
{
...
}
.commonButton:hover .commonButtonLeft
{
...
}
.commonButton:hover .commonButtonRight
{
...
}
.commonButton:hover .commonButtonContent
{
...
}
What I am trying to do is to stack an 'a' tag on top of a 'p' tag using the z-index property. So my html goes like this
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
and my CSS goes like this
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
z-index:1;
}
I believe this should stack the a on top of the p tag but that is not happening. Can anybody please explain what is that I am doing wrongly?
position: relative doesn't detach the element from the layout, so by default the element still takes up the same spot it would otherwise. relative has two purposes: to offset an element relative to its "real" position in the layout (which would require setting top, left, etc), and to serve as a non-static value so that child elements with position: absolute would position themselves relative to it.
With all that said, what you probably want in order to do what you're trying to do, is to set position: relative on the parent, and position: absolute on the edit link (at least). But that'd probably be quite ugly, as the text would likely overlap and be unreadable.
You have to also put
#personalText
{
position:relative;
}
#editButton
{
position:absolute; /* change */
top:0; /* new */
left:0; /* new */
z-index:2;
}
As Mihalis Bagos states, you need to push your #descText element upwards.
Here's the resulting CSS:
#editButton
{
position:relative;
z-index:2;
}
#descText
{
position:relative;
margin-top: 5px;
margin-bottom:5px;
bottom:25px;
z-index:1;
}
Here's the jsFiddle resulting from it.
This is a perfect use for JavaScript:
CSS
.hidden { display: none; }
jQuery
$('#descText').hover(function() {
$(this).find('a').removeClass('hidden');
}, function() {
$(this).find('a').addClass('hidden');
});
DEMO
Here's how you can put the <a> tag on top of the <p> tag: http://jsfiddle.net/gSWJB/1/
The example shows one possible use case: putting the link on top of the description, where the link might only be shown when the user hovers over it.
Some text
.sliderPart {
width: 25%;
height: 100%;
}
.sliderPart a {
display:block;
position:relative;
text-decoration:none;
height: 100%;
font: 1.3em Arial, Sans-serif;
}
How can I make my link clickable for all div-area?
The easiest thing is to remove the div altogether:
<a href="#computers" class="sliderPart">
<strong>Some text</strong>
</a>
a.sliderPart {
...
}
Try this:
$(".trigger").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
..you'd also need to give cursor: pointer to the clickable element.
Put the link outside the div. You can make an anchor tag act similarly to a div. Like you're doing in the css you posted.
For dropdown lists, I use the following method a lot...
If you're not opposed to using scripts, you can make the div itself a proxy of sorts, so that if you click anywhere on the div, the first link within that div is subsequently clicked automatically.
$(".sliderPart").bind("click", function(){
$("a:first", this).trigger("click");
});
Of course you would want to update your styles for the div when you mouse over it to indicate the entire thing is clickable.