I want to move an element from top to bottom, adding 1px to its top every 10millisecond using setInterval
This is my code:
var cir1 = document.getElementsByClassName('cir1');
function moveCir(elem) {
var elemTop = elem.style.top + 'px';
elem.style.top = elemTop;
elem.style.top = elemTop + 1 + 'px' ;
setInterval(function () {
moveCir(elem)
},10)
}
.cir1 {
height: 100px;
width: 100px;
margin: 30px 100px;
border: 1px solid #AC0D67;
border-radius: 100%;
display: inline-block;
}
<button onclick="moveCir(cir1)" id="start">Start</button>
<div class="cir1"></div>
But I cant find out why its not working
i guess you want this:
function moveCir(elem) {
var elemTop = elem.getBoundingClientRect().top;
if (elemTop < 200) {
elem.style.top = elemTop + 1 + 'px';
setTimeout(function() {
moveCir(elem)
}, 100)
}
}
#cir1 {
height: 100px;
width: 100px;
margin: 30px 100px;
border: 1px solid #AC0D67;
border-radius: 100%;
display: inline-block;
position: absolute;
}
<button onclick="moveCir(cir1)" id="start">Start</button>
<div id="cir1"></div>
however,i have to warn you :
this is a bad idea :
onclick="moveCir(cir1)"
a better solution is here:
var moveCir = function f(elem) {
var elemTop = elem.getBoundingClientRect().top;
if (elemTop < 200) {
cir1.style.top = elemTop + 1 + 'px';
setTimeout(f, 100, elem);
}
};
var cir1 = document.getElementById('cir1');
document.getElementById('start').addEventListener('click', function() {
moveCir(cir1)
}, false);
#cir1 {
height: 100px;
width: 100px;
margin: 30px 100px;
border: 1px solid #AC0D67;
border-radius: 100%;
display: inline-block;
position: absolute;
}
<button id="start">Start</button>
<div id="cir1"></div>
var cir = document.getElementsByClassName('cir1')[0];
var cirTop = cir.style.top;
function moveCir() {
cirTop++;
cir.style.top = cirTop + 'px';
}
setInterval(moveCir, 10);
class names are taken as an array. You have not included [0] in document.getElementsByClassName('cir1')
Fiddle link
I am trying to make this circle in perspective(check fiddle link). I tried the css property but it shows unusual behaviour.
/*
using:
circular positioning code:
http://stackoverflow.com/a/10152437/1644202
point at:
http://pointat.idenations.com/api
depends on:
jquery
https://github.com/thomas-dotworx/jqrotate (pointat)
*/
function createFields() {
$('.field').remove();
var container = $('#container');
for(var i = 0; i < +$('input:text').val(); i++) {
$('<div/>', {
'class': 'field',
'text': i + 1,
}).appendTo(container);
}
}
function distributeFields(deg) {
deg = deg || 0;
var radius = 200;
var fields = $('.field:not([deleting])'), container = $('#container'),
width = container.width(), height = container.height(),
angle = deg || Math.PI*3.5, step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - $(this).width()/2);
var y = Math.round(height/2 + radius * Math.sin(angle) - $(this).height()/2);
if(window.console) {
console.log($(this).text(), x, y);
}
$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
}
$('input').change(function() {
createFields();
distributeFields();
initPointAt();
});
var timer = null,
timer2 = null;
$('#addone').click(function() {
// do not append to current, otherwise you see it moving through the container
$('.field').addClass('moveAni');
$('<div/>', {
'class': 'field',
'text': $('.field').length +1
})
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'})
.addClass('moveAni')
.appendTo('#container')
.pointat({
target: "#center",
defaultDirection: "down"
});
distributeFields();
// without css:
//$('.field').pointat("updateRotation");
// with css: for css move animation
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field').length);
});
$('#delone').click(function() {
$('#container .field:not([deleting]):last')
.attr('deleting', 'true')
.css({
left: $('#container').width()/2-25 + 'px',
top: $('#container').height()/2-25 + 'px'
})
.fadeOut(400, function() {
$(this).remove();
});
// do distribiution as if the currently out-animating fields are gone allready
distributeFields();
clearInterval(timer); clearTimeout(timer2);
timer = setInterval(function() {
$('.field').pointat({
target: "#center",
defaultDirection: "down"
}); // does not seem to update correctly: .pointat("updateRotation")
}, 20);
timer2 = setTimeout(function() {
clearInterval(timer);
}, 420); // css animation timeout, interval +1 extra to update after the ani
// update input field
$('input:text').val($('.field:not([deleting])').length); // update yet
});
createFields();
distributeFields();
initPointAt();
function initPointAt() {
$('.field').pointat({
target: "#center",
defaultDirection: "down",
xCorrection: -20,
yCorrection: -20
});
}
body { padding: 2em; }
#container { width: 600px; height: 600px; border: 1px solid #000; position: relative; border-radius: 50%;}
#center { width: 10px; height: 10px; position: absolute; left: 295px; top: 295px; background: #000; border-radius: 50%; }
.field { position: absolute; background: #f00; }
#crosshair-x { width: 600px; height: 1px; background: #000; position: absolute; left: 0; top: 300px; }
#crosshair-y { width: 1px; height: 600px; background: #000; position: absolute; left: 300px; top: 0; }
.field {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.moveAni {
transition: left 400ms ease-out, top 400ms ease-out;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//pointat.idenations.com/jquery.pointat.min.js"></script>
<script src="//pointat.idenations.com/jquery.rotate-1.0.1.min.js"></script>
Number of fields: <input type="text" value="4" />
<button id="addone">++</button>
<button id="delone">--</button>
<div id="container">
<div id="center"></div>
<div id="crosshair-x"></div>
<div id="crosshair-y"></div>
</div>
Then i inserted an image tad inside container and tried to add field inside image tag.
I achieved this using three.js but don't want to do this in it because it takes too much time to load.
Wrap your container in another div you apply perspective to. The perspective must be applied to the parent, not to the element itself.
Updated Fiddle link : http://jsfiddle.net/w840vkbL/1/
#perspective {
perspective: 500px;
width: 150px;
}
#container {
transform: rotateY(40deg);
background: lightblue;
height: 150px;
}
<div id="perspective">
<div id="container">
<h3>SOME PERSPECTIVE CONTENT</h3>
</div>
</div>
Here is my code:
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
div {
padding: 20px;
border: 1px solid gray;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title='a title'>
<a>long-length-tag</a>
<a>tag</a>
</div>
As you see, there is a dark popup on tags hover. Also div's title will be appear when that popup shows. How can I disable the title? (on tags hover)
The title hover is a per browser thing.
A better option would be to remove the title property when you add the hover over option.
/// somewhere in your hover in function
element.oldTitle = element.title;
element.title = '';
/// somewhere in your hover out function
element.title = element.oldTitle;
This should do the trick. When your mouse enters the tag, the current title will be set in the oldTitle attribute. When mouse leaves the tag, the current title will take its old value from the oldTitle attribute.
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
//get title and set it in a new attribute of the div
var container = $(this).closest('div');
container.attr('oldTitle', container.attr('title'));
container.attr('title', '');
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
//reactivate the title
var container = $(this).closest('div');
container.attr('title', container.attr('oldTitle'));
}
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
body{
padding: 20px;
direction: rtl;
}
div {
padding: 20px;
border: 1px solid gray;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title='a title'>
<a>long-length-tag</a>
<a>tag</a>
</div>
Add the following code on the mouseenter event:
$(this).parent().data('title', $(this).parent().attr('title'));
$(this).parent().attr('title', '');
.. and this on the mouseleave:
$(this).parent().attr('title', $(this).parent().data('title') );
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
$(this).parent().data('title', $(this).parent().attr('title'));
$(this).parent().attr('title', '');
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
$(this).parent().attr('title', $(this).parent().data('title') );
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
div {
padding: 20px;
border: 1px solid gray;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title='a title'>
<a>long-length-tag</a>
<a>tag</a>
</div>
Add an empty title attribute on the child element.
You can add an empty title attribute to your a elements to resolve this issue. The empty tag on the children will prevent the parent title from showing...
See the changed code example below.
$.fn.right = function() {
return $(document).width() - (this.offset().left + this.outerWidth());
}
$(document).ready(function(){
$('a').bind('mouseenter', function() {
var self = $(this);
this.iid = setTimeout(function() {
var tag_name = self.text(),
top = self.position().top + self.outerHeight(true),
right = self.right();
$('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
$(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);
}, 525);
}).bind('mouseleave', function(){
if(this.iid){
clearTimeout(this.iid)
$('.tag_info').remove();
}
});
});
body{
padding: 20px;
direction: rtl;
}
div {
padding: 20px;
border: 1px solid gray;
}
a {
color: #3e6d8e !important;
background-color: #E1ECF4;
padding: 2px 5px;
}
.tag_info{
position: absolute;
width: 130px;
height: 100px;
display:none;
background-color: black;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div title='a title'>
<a title="">long-length-tag</a>
<a title="">tag</a>
</div>
On hover main image, the zoom image should display its properties like the specified width and height. Code is working but, the problem in zoom image on hover main image.
/* This is my script. I have used this for my code in this, marksize indicates id="mark" in my html main image and zoomImg indicates width and height for on hover the main image. */
$(function(){
$("#show").simpleZoom({
zoomBox : "#zoom",
markSize : \[120, 169\],
zoomSize : \[800, 400\],
zoomImg : \[480, 677\]
});
});
(function($){
$.fn.simpleZoom = function(options){
var defs = {
markSize : \[200, 100\],
zoomSize : \[400, 400\],
zoomImg : \[800, 800\]
};
var opt = $.fn.extend({}, defs, options);
return this.each(function(){
var markBox = $(this);
var zoomBox = $(opt.zoomBox);
var zoom_img = $(opt.zoomBox).find("img");
var markBoxSize = \[markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top\];
var markSize = opt.markSize;
var zoomSize = opt.zoomSize;
var zoomImg = opt.zoomImg;
var mark_ele = "<i id='mark'></i>";
var mark_css = {position:"absolute", top:0, left:0, width:markSize\[0\]+"px", height:markSize\[1\]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)", display:"none", cursor:"crosshair"};
var show_w = markBoxSize\[0\]-markSize\[0\];
var show_h = markBoxSize\[1\]-markSize\[1\];
//created mark element and add cascading style sheets
zoomBox.css({width:zoomSize\[0\]+"px", height:zoomSize\[1\]+"px"});
markBox.append(mark_ele);
$("#mark").css(mark_css);
markBox.mouseover(function(){
$("#mark").show();
zoomBox.show();
}).mouseout(function(){
$("#mark").hide();
zoomBox.hide();
}).mousemove(function(e){
var l = e.pageX-markBoxSize\[2\]-(markSize\[0\]/2);
var t = e.pageY-markBoxSize\[3\]-(markSize\[1\]/2);
if(l < 0){
l = 0;
}else if(l > show_w){
l = show_w;
}
if(t < 0){
t = 0;
}else if(t > show_h){
t = show_h;
}
$("#mark").css({left:l+"px", top:t+"px"});
var z_x = -(l/show_w)*(zoomImg\[0\]-zoomSize\[0\]);
var z_y = -(t/show_h)*(zoomImg\[1\]-zoomSize\[1\]);
zoom_img.css({left:z_x+"px", top:z_y+"px"});
});
});
}
})(jQuery);
#show {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
left: 0;
}
#show_mark {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
cursor: crosshair;
border: 1px solid #999;
display: none;
}
#zoom {
position: absolute;
left: 250px;
top: 0;
z-index: 99;
/*width: 400px;*/
height: 400px;
display: none;
overflow: hidden;
border: 1px solid #eee;
}
#zoom img {
position: absolute;
left: 0;
top: 0;
}
#show_pic{
display: block !important;
width: 60% !important;
height: 400px !important;
margin: 0 0 0 21%;
}
<div class="main">
<div id="show">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>" id="show_pic" />
</div>
<div id="zoom">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>"/>
</div>
</div>
The above shown is my image. Please refer and help me out soon.
Instead of the above code i have done with this and it's working fine.
HTML code
<div class="bzoom_wrap">
<ul id="bzoom">
<li>
<img class="bzoom_thumb_image" src="saree.jpeg" />
<img class="bzoom_big_image" src="saree.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree1.jpeg"/>
<img class="bzoom_big_image" src="saree1.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree2.jpeg"/>
<img class="bzoom_big_image" src="saree2.jpeg"/>
</li>
</ul>
</div>
Scripts i have used
<script type="text/javascript">
$("#bzoom").zoom({
zoom_area_width: 400,
autoplay_interval: 3000,
small_thumbs: 3,
autoplay: false
});
</script>
<script>
(function ($) {
$.fn.zoom = function (options) {
var _option = {
align: "left",
thumb_image_width: 380,
thumb_image_height: 400,
source_image_width: 450,
source_image_height: 450,
zoom_area_width: 400,
zoom_area_height: "justify",
zoom_area_distance: 10,
zoom_easing: true,
click_to_zoom: false,
zoom_element: "auto",
show_descriptions: true,
description_location: "bottom",
description_opacity: 0.7,
small_thumbs: 3,
smallthumb_inactive_opacity: 1,
smallthumb_hide_single: true,
smallthumb_select_on_hover: false,
smallthumbs_position: "bottom",
show_icon: true,
hide_cursor: false,
// speed: 600,
autoplay: true,
// autoplay_interval: 6000,
keyboard: true,
right_to_left: false,
}
if (options) {
$.extend(_option, options);
}
var $ul = $(this);
if ($ul.is("ul") && $ul.children("li").length && $ul.find(".bzoom_big_image").length) {
$ul.addClass('bzoom clearfix').show();
var $li = $ul.children("li").addClass("bzoom_thumb"),
li_len = $li.length,
autoplay = _option.autoplay;
$li.first().addClass("bzoom_thumb_active").show();
if (li_len < 2) {
autoplay = false;
}
$ul.find(".bzoom_thumb_image").css({width: _option.thumb_image_width, height: _option.thumb_image_height}).show();
var scalex = _option.thumb_image_width / _option.source_image_width,
scaley = _option.thumb_image_height / _option.source_image_height,
scxy = _option.thumb_image_width / _option.thumb_image_height;
var $bzoom_magnifier, $bzoom_magnifier_img, $bzoom_zoom_area, $bzoom_zoom_img;
if (!$(".bzoom_magnifier").length) {
$bzoom_magnifier = $('<li class="bzoom_magnifier"><div class=""><img src="" /></div></li>');
$bzoom_magnifier_img = $bzoom_magnifier.find('img');
$ul.append($bzoom_magnifier);
$bzoom_magnifier.css({top: top, left: left});
$bzoom_magnifier_img.attr('src', $ul.find('.bzoom_thumb_active .bzoom_thumb_image').attr('src')).css({width: _option.thumb_image_width, height: _option.thumb_image_height});
$bzoom_magnifier.find('div').css({width: _option.thumb_image_width * scalex, height: _option.thumb_image_height * scaley});
}
if (!$('.bzoom_zoom_area').length) {
$bzoom_zoom_area = $('<li class="bzoom_zoom_area"><div><img class="bzoom_zoom_img" /></div></li>');
$bzoom_zoom_img = $bzoom_zoom_area.find('.bzoom_zoom_img');
var top = 0,
left = 0;
$ul.append($bzoom_zoom_area);
if (_option.align == "left") {
top = 0;
left = 0 + _option.thumb_image_width + _option.zoom_area_distance;
}
$bzoom_zoom_area.css({top: top, left: left});
$bzoom_zoom_img.css({width: _option.source_image_width, height: _option.source_image_height});
}
var autoPlay = {
autotime: null,
isplay: autoplay,
start: function () {
if (this.isplay && !this.autotime) {
this.autotime = setInterval(function () {
var index = $ul.find('.bzoom_thumb_active').index();
changeLi((index + 1) % _option.small_thumbs);
}, _option.autoplay_interval);
}
},
stop: function () {
clearInterval(this.autotime);
this.autotime = null;
},
restart: function () {
this.stop();
this.start();
}
}
var $small = '';
if (!$(".bzoom_small_thumbs").length) {
var top = _option.thumb_image_height + 10,
width = _option.thumb_image_width,
smwidth = (_option.thumb_image_width / _option.small_thumbs) - 10,
smheight = smwidth / scxy,
ulwidth =
smurl = '',
html = '';
for (var i = 0; i < _option.small_thumbs; i++) {
smurl = $li.eq(i).find('.bzoom_thumb_image').attr("src");
if (i == 0) {
html += '<li class="bzoom_smallthumb_active"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
} else {
html += '<li style="opacity:1;"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
}
}
$small = $('<li class="bzoom_small_thumbs" style="top:' + top + 'px; width:' + width + 'px;"><ul class="clearfix" style="width: 485px;">' + html + '</ul></li>');
$ul.append($small);
$small.delegate("li", "click", function (event) {
changeLi($(this).index());
autoPlay.restart();
});
autoPlay.start();
}
function changeLi(index) {
$ul.find('.bzoom_thumb_active').removeClass('bzoom_thumb_active').stop().animate({opacity: 0}, _option.speed, function () {
$(this).hide();
});
$small.find('.bzoom_smallthumb_active').removeClass('bzoom_smallthumb_active').stop().animate({opacity: _option.smallthumb_inactive_opacity}, _option.speed);
$li.eq(index).addClass('bzoom_thumb_active').show().stop().css({opacity: 0}).animate({opacity: 1}, _option.speed);
$small.find('li:eq(' + index + ')').addClass('bzoom_smallthumb_active').show().stop().css({opacity: _option.smallthumb_inactive_opacity}).animate({opacity: 1}, _option.speed);
$bzoom_magnifier_img.attr("src", $li.eq(index).find('.bzoom_thumb_image').attr("src"));
}
_option.zoom_area_height = _option.zoom_area_width / scxy;
$bzoom_zoom_area.find('div').css({width: _option.zoom_area_width, height: _option.zoom_area_height});
$li.add($bzoom_magnifier).mousemove(function (event) {
var xpos = event.pageX - $ul.offset().left,
ypos = event.pageY - $ul.offset().top,
magwidth = _option.thumb_image_width * scalex,
magheight = _option.thumb_image_height * scalex,
magx = 0,
magy = 0,
bigposx = 0,
bigposy = 0;
if (xpos < _option.thumb_image_width / 2) {
magx = xpos > magwidth / 2 ? xpos - magwidth / 2 : 0;
} else {
magx = xpos + magwidth / 2 > _option.thumb_image_width ? _option.thumb_image_width - magwidth : xpos - magwidth / 2;
}
if (ypos < _option.thumb_image_height / 2) {
magy = ypos > magheight / 2 ? ypos - magheight / 2 : 0;
} else {
magy = ypos + magheight / 2 > _option.thumb_image_height ? _option.thumb_image_height - magheight : ypos - magheight / 2;
}
bigposx = magx / scalex;
bigposy = magy / scaley;
$bzoom_magnifier.css({'left': magx, 'top': magy});
$bzoom_magnifier_img.css({'left': -magx, 'top': -magy});
$bzoom_zoom_img.css({'left': -bigposx, 'top': -bigposy});
}).mouseenter(function (event) {
autoPlay.stop();
$bzoom_zoom_img.attr("src", $(this).find('.bzoom_big_image').attr('src'));
$bzoom_zoom_area.css({"background-image": "none"}).stop().fadeIn(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 0.5}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 1}, _option.speed * 0.7).show();
}).mouseleave(function (event) {
$bzoom_zoom_area.stop().fadeOut(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 1}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 0}, _option.speed * 0.7, function () {
$(this).hide();
});
autoPlay.start();
})
}
}
})(jQuery);
</script>
My style sheet
<style>
.bzoom { direction: ltr; }
.bzoom,
.bzoom_thumb,
.bzoom_thumb_image,
.bzoom_big_image,
.bzoom_zoom_preview,
.bzoom_icon,
.bzoom_hint { display: none }
.bzoom,
.bzoom ul,
.bzoom li,
.bzoom img,
.bzoom_hint,
.bzoom_icon,
.bzoom_description {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.bzoom,
.bzoom_magnifier div,
.bzoom_magnifier div img,
.bzoom_small_thumbs ul,
ul .bzoom_small_thumbs li,
.bzoom_zoom_area div,
.bzoom_zoom_img { position: relative; }
.bzoom img,
.bzoom li {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
}
.bzoom,
.bzoom_small_thumbs li { float: left; }
.bzoom_right { float: right;}
.bzoom li {
position: absolute;
border: 1px solid #cfcece;
}
.bzoom img {
vertical-align: bottom;
width: 50px;
height: 70px;
border: 1px solid #eaeaea;
}
.bzoom .bzoom_zoom_area,
.bzoom_zoom_area {
background: #fff url(./img/loading.gif) center no-repeat;
border: 1px solid #ddd;
padding: 6px;
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
display: none;
z-index: 20;
}
.bzoom_zoom_area div { overflow: hidden; }
.bzoom_zoom_area .bzoom_zoom_img { position: absolute; }
.bzoom_wrap .bzoom_magnifier {
background: #fff;
outline: #bbb solid 1px;
display: none;
cursor: move;
}
.bzoom_magnifier div { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs li {
border: 1px solid #FFF;
margin: 0px 10px 0px 0px;
position: relative;
border: 1px solid #cfcece;
}
.bzoom_wrap ul li.bzoom_smallthumb_active {
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
border: 1px solid #535353;
}
</style>
I am trying to make sticky table headers. Here is what I have so far as an example of what I need.
Here is the code I found from someone else.
function makeTableHeadersSticky(tableId) {
var thArr = $(tableId + " th");
var thWidthsArr = [];
$(tableId + " th").each(function(){
thWidthsArr.push($(this).css("width"));
});
var pos = $(tableId).offset();
var thTop = pos.top + "px";
var count = 0;
$(tableId + " tr:first-child > th").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
count = 0;
$(tableId + " tr:last-child > td").each(function(){
$(this).css("width", thWidthsArr[count]);
count++;
});
$(window).scroll(function(){
if($(window).scrollTop() > pos.top) {
$(tableId + " tr:first-child").css("position", "fixed");
$(tableId + " tr:first-child").css("top", "0px");
} else {
$(tableId + " tr:first-child").css("position", "relative");
$(tableId + " tr:first-child").css("top", thTop);
}
});
console.log(thTop);
}
makeTableHeadersSticky("#myTable");
Here you can see a DEMO of what I want to achieve JSFiddle
You could use CSS to fix the headline to the top and then give the container a margin at the top to stop it from overflowing:
http://jsfiddle.net/n9wac1x6/5/
header {
width: 100%;
background-color: #fff;
height: 50px;
position: fixed;
top:0;
left: 0;
}
h1 {
position: absolute;
left: 5px;
top 2px;
padding: 0;
margin: 0;
}
.container {
margin-top: 50px;
}