i have a sticky transparent header using the following css code on my website www.obviagency.com
CSS CODE:
#site-header-inner {
height:0px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
}
i would like to change the background color on scroll to white. can someone please help me because nothing i've tried works:/
thank you
You would have to use JavaScript with a scroll event listener. I used blue as an example so you can see the change and added a transition property to the header so it would transition smoothly.
let header = document.getElementById('site-header-inner');
document.addEventListener('scroll', function() {
// Get the scroll position
let scrollPos = window.pageYOffset;
if ( scrollPos > 100 ) {
header.style.backgroundColor = "white";
} else {
header.style.backgroundColor = "blue";
}
});
#site-header-inner {
height:50px;
z-index:170;
margin:0 auto;
width:100%;
position:fixed;
top:0;
margin-top:10px;
background-color: blue;
transition: all 0.3s;
}
#section {
height: 1000px;
}
<header id="site-header-inner">
</header>
<section id="section">
</section>
Related
Inside of #container (position:relative) I have 2 divs: both are 50% wide, the #first one is very tall (position:relative) and the #second one is at least 2000px tall.
Is there any way to make #second stop scrolling when it's bottom reached, but keep scrolling the other content? Would be great without making extra parent div for it.
Fiddle: https://jsfiddle.net/Moor/ha4zybpb/
#container{
position:relative;
}
#first{
width:50%;
background:#333;
height:10000px;
}
#second{
position:absolute;
right:0;
top:0;
width:50%;
height:2000px;
background:limegreen;
}
<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
A jquery "sticky" solution..
https://jsfiddle.net/cusjptLr/4/
var sh = $('#second').height();
$(window).scroll(function(){
if (($(window).scrollTop() + $(window).innerHeight()) >= sh) {
$('#second').addClass("sticky");
}
});
#second.sticky {
position: fixed;
bottom: 0;
top: initial;
}
One way to achieve this would be to use position:sticky - although please be sure to check that the browser compatability for it meets your requirements.
*{margin:0;padding:0;}
#first{
background:#333;
display:inline-block;
height:10000px;
vertical-align:bottom;
width:50%;
}
#second{
background:linear-gradient(0deg,#f00,#090);
bottom:0;
display:inline-block;
height:2000px;
position:sticky;
vertical-align:bottom;
width:50%;
}
<div id="container"><div id="first"></div><div id="second"></div></div>
This is not a complete answer, but it might help you on your way -
check the scroll position and viewport height, and compare it to the height of the second element -
check this fiddle for my example. done with jquery
updated fiddle
$( document ).ready(function() {
console.log( "ready!" );
var secondHeight = $('#second').height();
console.log(secondHeight);
var stopper = 0;
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var viewportHeight = $(window).height();
// Do something
console.log(scroll+viewportHeight);
if(secondHeight <= scroll+viewportHeight) {
console.log('stop it here');
stopper = 1;
} else {
stopper = 0;
}
console.log(stopper);
if(stopper == 1) {
$('#second').css('position','fixed');
console.log('making it fixed');
} else {
$('#second').css('position','absolute');
console.log('making it absolute');
}
});
});
I have a css tooltip that I use to provide guidance, and I'm trying to include it in the jqgrid.
However, the title of the column appears on hover. The <span> does not. I tried adding title:false, but then nothing happens.
Here's the css I'm using:
.tooltip { border-bottom:1px dotted #000000; outline:none; text-decoration:none; cursor:help; }
.tooltip:hover em { padding: .2em 0 .6em 0; font-weight:bold; display:block; }
.tooltip { position:relative; }
.tooltip:hover span { position:absolute; left:1em; top:-4.5em; z-index:99; margin-left:0; width:150px; }
.tooltip:hover em { border:0; margin: -10px 0 0 -55px; float:left; position:absolute; }
.tooltip span { margin-left:-999em; position:absolute; }
And here's how it's applied:
<a class='tooltip' href='#'>
<img alt='Help' src='/Images/question_mark_sm.png' />
<span class='tooltip_classic info'>Guidance Tag</span>
</a>
Not sure why it will work anywhere else but in the jqGrid. I've tried and tried, but it doesn't seem to work. (Well, the image shows up and the cursor changes, but no popup.)
Try to remove tooltip attribute from a jqGrid cell.
For me it works fine for all the browsers, except IE7. I used jqGrig gridComplete event.
Here is an example:
// _YourColID is you column name from colModel
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").removeAttr("title");
$("td[aria-describedby*=_YourColID]", "#yourGridID tr").tooltip({
// each trashcan image works as a trigger
tip: '.tooltip',
// custom positioning
position: 'center right',
// move tooltip a little bit to the right
offset: [0, -10],
// there is no delay when the mouse is moved away from the trigger
delay: 0,
predelay: 2000,
onShow: function(e){
if ($(e.target).parent("tr").attr('id') != -1) {
yourTooltipFunction($(e.target).parent("tr").attr("id"));
}
}
}).dynamic({
bottom: {
direction: 'down',
bounce: true
}
});
In my thumbnail scroller I have a : <span id="tt" style="display:none;"></span> which is driven by a jquery fade in/fade out script and I want to position it outside of the thumbnails container.
the css for the span tag is :
span#tt {
position:absolute;
left:0;
top:0;
}
You can check the thumbnail scroller here
If I understand you well, these will do the job.
#tt {
position:absolute;
left:0;
top: 0;
margin-top:-20px; /*added*/
}
.jThumbnailScroller{
position:relative;
width:800px;
height:260px; /*changed 255px set it if you change #tt margin-top value*/
margin:0;
padding:0;
overflow:hidden
}
.jThumbnailScroller#tS1{
position:relative;
width:100%;
margin-top:100px;
padding-top:20px
}
Also edited your tip script. It was blinking If you move faster over images, because your script trying to fadein it before it finishes fadeout.
jQuery(document).ready(function(){
var link = jQuery('.jTscroller a');
link.each(function(){
$(this).mouseenter(function(){
var imgtitle = $(this).find('img').data('title');
$('#tt').html(imgtitle);
$('#tt').fadeIn('slow');
$(this).mouseleave(function()
{
$('#tt').hide();
});
});
});
});
Here's jsfiddle http://jsfiddle.net/dsu9a/7/
Don forget to remove these codes. This was for correcting img links with actual ones in fiddle.
jQuery(document).ready(function(){
var img = jQuery('.jTscroller a img');
img.each(function(){
var url = $(this).attr('src');
$(this).attr('src','http://outboxvision.com/test/'+url)
});
});
Correct your html like this.
<body>
<div id="tt"></div>
<!-- rest of the code -->
I have realized show/hide function in css. But it's not what i need. i want to expand the content layer by layer and hide them all in one click. And now i can't expand layer by layer.
Can you help me with that? Thanks a lot. :)
here is the code and it's tested:
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
<style type="text/css">
#main{
position:relative;
top:20px;
left:20px;
width:200px;
background: lightblue;
}
#hidden {
position:relative;
top:0px;
left:280px;
width:200px;
background: lightgrey;
display: none;
}
#hidden2 {
position:relative;
top:-20px;
left:580px;
width:200px;
background: lightgreen;
display: none;
}
#hidden3 {
position:relative;
top:100px;
left:0px;
width:200px;
background: lightpink;
display: none;
}
</style>
<div id="main" onclick="toggle('hidden');toggle('hidden2');toggle('hidden3');">
1
</div>
<div id="hidden" onclick="toggle('hidden2');toggle('hidden3');">
1.1
</div>
<div id="hidden2"onclick="toggle('hidden3');">
1.1.1
</div>
<div id="hidden3">
1.1.1.1
</div>
Have you considered using a plugin from a framework like jQuery, Mootools, or ExtJS instead of trying to reinvent the wheel?
It looks like you want a treeviewer.
btw, you are using javascript, it's not only CSS... please tag javascript as well.
I have some div boxes which should show a speech box when on hover. With jQuery and CSS it’s nothing too hard.
However, the popup speech appears under the neighbor div in IE7 — I can not make it to appear under it (see the shots).
I tried to play with z-index at different spots with no success.
FF
alt text http://img134.imageshack.us/img134/5314/63386894.png
IE7
alt text http://img396.imageshack.us/img396/9329/95483890.png
HTML
<div class="boardshot_list">
{% for ... %}
<span class="img_box">
<a href="/site_media/xxx" target="_blank">
<img class="trigger" src="xxx" alt="{{ item.title }}" />
</a>
<div class="container_speech_box popup">
<div class="two">
<b class="tl"><b class="tr"></b></b>
<p>
blabla
</p>
<b class="bl"></b><b class="br"><b class="point"></b></b>
</div>
</div>
</span>
{% endfor %}
</div>
CSS
div.boardshot_list span.img_box {
display:block;
width:220px;
height:180px;
float: left;
margin: 0 10px 10px 0;
position: relative;
}
img.trigger{
border:1px solid #373743;
}
div.popup
{
display: none;
position: absolute;
z-index: 50;
}
/* POPUP rounded box */
.container_speech_box div:after {content: "."; display: block; height:11px; clear:both; visibility:hidden;}
.container_speech_box div {width:300px; height:auto; font-family:verdana; font-size:11px;}
b.tl {display:block; width:300px; height:8px; font-size:1px;}
b.tr {display:block; width:292px; height:8px; font-size:1px; float:right;}
b.bl {display:block; width:8px; height:8px; font-size:1px; float:left;}
b.br {display:block; width:292px; height:8px; font-size:1px; float:right; position:relative;}
b.point {display:block; font-size:1px; width:25px; height:14px;}
.container_speech_box div p {padding:8px; margin:0; border:3px solid #4f5b69; border-width:0 3px; text-align:justify;}
div.two b.tl {background:url(/site_media/images/top_left2.gif) top left no-repeat;}
div.two b.tr {background:url(/site_media/images/top_right2.gif) top right no-repeat;}
div.two p {background:#fff;}
div.two b.bl {background:url(/site_media/images/bottom_left2.gif) top left no-repeat;}
div.two b.br {background:url(/site_media/images/bottom_right2.gif) top right no-repeat;}
div.two b.point {background:url(/site_media/images/point2.gif) top left no-repeat; margin:5px 0 0 125px;}
/* end popup table */
div.boardshot_list {
width: 700px;
clear: left;
min-height: 80px;
}
div.boardshot_list .memo_id {
padding-left: 10px;
position: relative;
float:right;
color:#60564d;
font-size: 25px;
padding-top: 20px;
width: 50px;
top: 30px;
left: 10px;
font-family:"Palatino Linotype","Book Antiqua",Palatino,FreeSerif,serif;
}
div.boardshot_list.even {
background-color: #f3f5f6;
}
div.boardshot_list .title span{
color: #bbb;
font-weight: normal;
}
div.boardshot_list .img img {
border:1px solid #373743;
}
JS
<script type="text/javascript">
$(document).ready(function(){
$('.img_box').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 50;
var hideDelayTimer = null;
// tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({
top: -10,
left: 20,
display: 'block' // brings the popup back in to view
})
// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 0.9
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
opacity: 0
}, time, 'swing', function () {
shown = false;
popup.css('display', 'none');
});
}, hideDelay);
});
});
});
</script>
I think this is due to a z-index bug in Internet Explorer. Positioned elements (i.e. elements with a position other than static) establish their own stacking context.
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
In my experience, it’s as if all your div.boardshot_list span.img_box have a z-index of 0, and elements inside each div.boardshot_list span.img_box have a z-indexes of 0.1, 0.2 and so on, instead of 1 and 2.
You should be able to fix the issue by setting the z-index of the span.img_box containing the visible pop-up to 1, like this:
// reset position of popup box
popup.css({
top: -10,
left: 20,
display: 'block' // brings the popup back in to view
})
$(this).css('z-index', '1');
Don’t forget to reset it to 0 when the pop-up disappears.
It's probably because of conflict of multiply classes (.container_speech_box and .popup) style resolution in different browsers. Try to wrap .popup div around the .container_speech_box.