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 -->
Related
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>
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 wan't to make a special menu for the iPad version of my website.
It should work like this:
http://itu.dk/people/mbul/humlum/images/ipad_menu.png
Click on IMG 1 and the menu expands (to IMG 2) and the links gets visible. When you click outside IMG 2 it disappears along with the links so only IMG 1 is visible.
I've come this far but it doesn't really do the trick:
<div class="nav_mobile_container">
<div class="nav_mobile_elements">
<div class="nav_mobile"></div>
</div>
</div>
div.nav_mobile_container{
position: fixed;
top: 0px;
left: 0px;
}
div.nav_mobile_elements{
display: inline-block;
}
div.nav_mobile_elements a{
vertical-align: top;
display: inline-block;}
div.nav_bookmark:hover{
display: inline-block;
}
.nav_mobile{
width:70px;
height:70px;
background-image:url('images/menu_small.png');
display: inline-block;
}
.nav_mobile:hover{
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
I would really appreciate a CSS solution on this if possible.
Thank you!
The closest you can get is
#nav_mobile:active {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
But that does not work on an ipad.
I recommend to use a bit of javascript.
Create an onclick event that displays a div with all the navigation information you need.
With jquery:
$("#small_navigation").click(function(){
$("#big_navigation").show();
});
The css:
#big_navigation {
display: none;
width: ...
height: ...
etc...
}
You will need javascript for this. Using jQuery, this is how you could make it :
First, don't set an :hover in your CSS, but just make a class that you will add on click :
.nav_mobile.navopen {
width:496px;
height:500px;
background-image:url('images/menu_small_expanded.png');
}
And then a bit of jQuery to make it work :
$(document).ready(function(){
// expend the menu on click
$('.nav_mobile').on('click', function(event){
event.stopPropagation();
$(this).addClass('navopen');
});
// close menu on click outside the menu
$('html').click(function() {
$('.nav_mobile').removeClass('navopen');
});
});
The jsFiddle demo
Edit : with pure javascript
window.onload = function() {
var menu = document.getElementsByClassName('nav_mobile')[0];
menu.onclick=function(e){
e.stopPropagation();
menu.className = "nav_mobile navopen";
};
var html = document.getElementsByTagName('html')[0];
html.onclick=function(){
menu.className = "nav_mobile";
};
};
i am using this jquery function to display a pop window. in this code it works fine for paragraph or div attribute with a css id. but i want to use it a several times in my html file, so i need to convert the id's to classes.
here is my js file:
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
//loads popup only if it is disabled
if(popupStatus==0){
$("#backgroundPopup").css({
"opacity": "0.7"
});
$("#backgroundPopup").fadeIn("slow");
$("#popupContact").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup(){
//disables popup only if it is enabled
if(popupStatus==1){
$("#backgroundPopup").fadeOut("slow");
$("#popupContact").fadeOut("slow");
popupStatus = 0;
}
}
//centering popup
function centerPopup(){
//request data for centering
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $("#popupContact").height();
var popupWidth = $("#popupContact").width();
//centering
$("#popupContact").css({
"position": "absolute",
"top": windowHeight/2-popupHeight/3.25,
"left": windowWidth/2-popupWidth/2
});
//only need force for IE6
$("#backgroundPopup").css({
"height": windowHeight
});
}
//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
//LOADING POPUP
//Click the button event!
$("#button").click(function(){
//centering with css
centerPopup();
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
$("#popupContactClose").click(function(){
disablePopup();
});
//Click out event!
$("#backgroundPopup").click(function(){
disablePopup();
});
//Press Escape event!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
here is the css:
#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
width:470px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
cursor: pointer;
}
#button{
text-align:left;
}
and here is html:
<div id="button"><input type="submit" value="submit" /></div>
<div id="popupContact">
<a id="popupContactClose">x</a>
<h1>Description</h1>
<p id="contactArea">
<?php echo $data['description'];?>
</p>
</div>
<div id="backgroundPopup"></div>
it works perfectly, when it is set for div with a css id.but now, if i change all those '#'s to '.'s to make the id's into classes, it doesn't work. how do make it work?
maybe you must clear your browsercache. If you change all # to . and all id to class it must work....for more informations click here
Changed to class from id's it's working fine for me
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.