I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top. The style or anything does not mention this explicitly, as it still has position:fixed but what I see is this. I tried most of the questions related to this problem in stackoverflow and other resources but nothing gave me a satisfying answer. Any help? Thanks.
$.fn.extend({
scrollTabs: function() {
var pageTop = parseFloat($(window).scrollTop());
if (elementTop < pageTop + 66) {
$(this).css({
'position': 'fixed',
'top': '66px',
'left': '0',
'right': '0',
'z-index': '9999',
'background': '#ffffff',
'width': '100%',
'padding': '20px 0',
'margin-top': '0'
});
$(this).find('#product-tabs').css({
'max-width': '1300px',
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$(this).css({
'position': 'initial',
'margin-top': '-' + elementHeight + 'px'
});
}
}
});
$(window).load(function() {
var scrollElement = $('.box-additional.box-tabs.grid12-12');
elementTop = parseFloat($(scrollElement).offset().top);
var overflowHeight = parseFloat($(window).height()) - 200;
$('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
var scrollElement = $('#firstElement');
elementHeight = parseFloat($(scrollElement).outerHeight());
var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
var newElement = $('#newElement');
$(scrollElement).css('visibility', 'hidden');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(scrollElement).after(newElement);
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
$(window).resize(function() {
var scrollElement = $('#firstElement');
elementTop = parseFloat($(scrollElement).offset().top);
elementHeight = parseFloat($(scrollElement).outerHeight());
var newElement = $('#newElement');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
.header-container {
background-color: #000;
position: fixed;
width: 100%;
z-index: 99999;
color: #fff;
}
.grid12-12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
font-size: 50px;
}
.page-content {
min-height: 1000px;
float: left;
font-size: 72px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
this is my menu
</div>
<div class="page-content">
this is my page content
<div>
<div class="box-additional box-tabs grid12-12">
this is my container
</div>
jQuery(newElement).css('margin-top', '-' + elementHeight + 'px');
to
jQuery(newElement).css('top', '-' + elementHeight + 'px');
Related
I'm trying to get an image to scroll slower than other elements on a site with the div class slow-image however the JQuery doesn't seem to do anything. Does anyone know why?
CSS:
.slow-image
{
position: absolute;
width: 25vw;
top: 10vw;
margin-left: 60vw;
}
HTML
<div class="slow-image"><img src="..."></div>
JQuery
$(document).ready(function(){
var $win = $(window);
$('slow-image').each(function(){
var scroll_speed = 0.8;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
TEST PAGE
Im trying to have the top of the vertical line of the sidebar to stop at the top nav (example image attached), I tried to add 'top': '20' in the js code and it didnt work. I also tried margin-top: 20px in CSS and that didnt do the trick. Im not sure where I can add 20px height above the sidebar.
JavaScript
$(document).ready(function () {
var length = $('#community-sidebar').height() - $('#community-section-col1').height() + $('#community-sidebar').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#community-section-col1').height() + 'px';
if (scroll < $('#community-sidebar').offset().top) {
$('#community-section-col1').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('#community-section-col1').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('#community-section-col1').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
CSS
#community-sidebar {left: -45px; position: absolute; top: -40px; height: 1500px;}
.h-line { border-left: solid black 1px; height: 550px; border-width: thin; width: 1px; left: 189px; position: absolute; top: 0;}
Wrapping the header with a div having height 20px followed with position:fixed for the header.
<div style="height:20px">
<div style="position:fixed">
//your header content
</div>
</div>
I have a draggable element (see the code snippet and click on picture to add pins) which shows a tooltip on mouseover and deletes it on mouseout.
The below code throws tens of errors "TypeError: e.$element is null" in Firefox or "Uncaught TypeError: Cannot read property 'trigger' of null" in Chrome as soon as I start dragging the pin element.
I tried:
$('.tooltip').remove();
$('.tooltip').tooltip('destroy');
$('.pin').tooltip('destroy');
but none of these solve that.
How can I stop the tooltip errors when dragging the element?
var pic_wrapper = $('#pic_wrapper');
var selected_picture = $('#selected_picture');
selected_picture.on('click', function(e) {
var pin = $('<div class="pin"></div>');
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
pin.uniqueId();
pic_wrapper.append(pin);
pin.css({
transform: 'translate(-50%, -50%)'
});
pin.css({
left: x,
top: y
}).show();
pin.draggable({
containment: 'parent'
});
pin.on('dragstart', function() {
pin.css({
transform: 'translate(0%, 0%)'
});
});
pin.on('dragstop', function(e, ui) {
x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
pin.css({
left: x,
top: y
});
});
});
pic_wrapper.on('mouseenter', '.pin', function(e) {
$(this).attr('title', 'tooltip text');
$(this).tooltip({
placement: function(context, source) {
return "right";
}
});
$(this).tooltip('show');
});
pic_wrapper.on('mouseout', '.pin', function(e) {
$(this).tooltip('destroy');
});
#pic_wrapper {
display: block;
position: relative;
padding: 0;
border: 1px dotted #0099ff;
}
#selected_picture {
width: 100%;
height: auto;
border: 1px solid #0099ff;
}
#selected_picture img {
width: 100%;
height: auto;
}
.pin {
display: none;
position: absolute;
padding: 0;
margin: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ff4100;
cursor: pointer;
box-shadow: 0 0 0 rgba(255, 65, 0, 0.4);
animation: pulse 2s infinite;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<fieldset>
<div class="col-xs-12">
<div class="form-group">
<div id="pic_wrapper">
<div id="selected_picture">
<img src="http://www.outline-world-map.com/map-images-original/blank-thin-gray-white-world-map-b9a.png" />
</div>
</div>
</div>
</div>
</fieldset>
Try with:
$('.tooltip').tooltip('destroy').remove();
it should do the trick
I think the reason why you got this error, is that when you do the $('.tooltip').tooltip('destroy') it doesn't remove also all the events linked to the tooltip.
update: It's necessary to update also
$(this).attr('title', 'tooltip text');
with
$(this).attr('data-original-title', 'tooltip text');
otherwise it display 2 tooltip!
full JS code:
var pic_wrapper = $('#pic_wrapper');
var selected_picture = $('#selected_picture');
selected_picture.on('click', function(e) {
var pin = $('<div class="pin"></div>');
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
pin.uniqueId();
pic_wrapper.append(pin);
pin.css({
transform: 'translate(-50%, -50%)'
});
pin.css({
left: x,
top: y
}).show();
pin.draggable({
containment: 'parent'
});
pin.on('dragstart', function() {
pin.css({
transform: 'translate(0%, 0%)'
});
});
pin.on('dragstop', function(e, ui) {
x = (ui.position.left / pic_wrapper.width()) * 100 + "%";
y = (ui.position.top / pic_wrapper.height()) * 100 + "%";
pin.css({
left: x,
top: y
});
});
});
pic_wrapper.on('mouseenter', '.pin', function(e) {
$(this).attr('data-original-title', 'tooltip text');
$(this).tooltip({
placement: function(context, source) {
return "right";
}
});
$(this).tooltip('show');
});
pic_wrapper.on('mouseout', '.pin', function(e)
{
$('.tooltip').tooltip('destroy').remove();
});
I want to get the current top position of .top class div, then i have to add some 20px+.top into the .bottom inline style.
Ex: if .top has top:200px; the .bottom must be changed to top:220px;
funtion(){
var position = $('.top').offset();
$('.bottom').css(position)+20px;
}
.parent
{
position: relative;
}
.child
{
position: absolute;
}
.top
{
top: 100px;
right: 0px;
}
.bottom
{
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child top">Top</div>
<div class="child bottom">Bottom</div>
</div>
funtion(){
var position= $('.top').offset();
var top= position.top;
var left = position.left;
var newtop = top + 20 + "px";
var newleft = left + 20+ "px";
$('.bottom').css( {
'position': 'absolute', // if require
'left': newleft,
'top': newtop
});
}
This might do the work:
var topPosition = $('.top').offset().top;
$('.bottom').css('top',(topPosition+20)+'px');
You can use the following code snippet for this,
$( '.bottom' ).css( 'top', $('.top').css('top'));
$( '.bottom' ).css( 'top', '+=20px' );
I have an image with a box shadow one it, but when I animate it, the box shadow seems to take on a life of its own, as seen here:
example
It happens the same way in both chrome, firefox, and IE.
I am perplexed and, more importantly at a loss at how to fix it so it looks pretty.
Thanks for any thoughts or answers about to fix this or why it is happening.
html/js:
<div id="sliderPane">
<div id="slider0" class="slider"><img src="1.jpg"/></div>
<div id="slider1" class="slider"><img src="2.jpg"/></div>
<div id="slider2" class="slider"><img src="3.jpg"/></div>
<div id="numSliders">3</div>
</div>
<script type="text/javascript">
var numsliders;
var currentSlider = 0;
var interval;
var slideWidth;
$('#slider0').css('opacity',1);
$(document).ready(function(){
numsliders = parseInt( $('#numSliders').html() );
$('#slider0').css('left', '62px');
$('#slider0').css('height', '200px');
$('#slider0').css('width', '200px');
$('#slider0').css('top', '20px');
$('#slider0').css('opacity', '1');
slideWidth = $('#slider0').width();
});
interval = window.setInterval(nextSlider, 5000);
function nextSlider() {
specificSlider((currentSlider + 1)%numsliders);
}
function specificSlider(sliderNumber){
//alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
window.clearInterval(interval);
// move the next slider on deck
$('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
$('#slider' + sliderNumber).css('top', '70px');
$('#slider' + sliderNumber).css('hieght', '100px');
$('#slider' + sliderNumber).css('width', '100px');
//alert('lol');
// move old slide off,
$('#slider' + currentSlider).animate({
left: '-80px',
top: '50px',
hieght: '100px',
width: '100px',
opacity: 0
},900,null);
// new slide on
$('#slider' + sliderNumber).animate({
left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
height: '200px',
width: '200px',
top: '20px',
opacity: 1
},900,null);
currentSlider = sliderNumber;
interval = window.setInterval(nextSlider, 5000);
}
</script>
css:
#sliderPane{
height: 200px;
position: relative;
overflow: hidden;
background-image: url('sliderBG.png');
background-size: 100% 100%;
padding: 20px 0;
}
.slider{
position: absolute;
opacity: 0;
top: -300px;
box-shadow: 2px 2px 10px 5px rgba(0,0,0,.4);
}
#numSliders{
visibility: hidden;
}
In order for you to accept an answer:
<div id="sliderPane">
<div id="slider0" class="slider"><img src="1.jpg"/></div>
<div id="slider1" class="slider"><img src="2.jpg"/></div>
<div id="slider2" class="slider"><img src="3.jpg"/></div>
<div id="numSliders">3</div>
</div>
<script type="text/javascript">
var numsliders;
var currentSlider = 0;
var interval;
var slideWidth;
$('#slider0').css('opacity',1);
$(document).ready(function(){
numsliders = parseInt( $('#numSliders').html() );
$('#slider0').css('left', '62px');
$('#slider0').css('height', '200px');
$('#slider0').css('width', '200px');
$('#slider0').css('top', '20px');
$('#slider0').css('opacity', '1');
slideWidth = $('#slider0').width();
});
interval = window.setInterval(nextSlider, 5000);
function nextSlider() {
specificSlider((currentSlider + 1)%numsliders);
}
function specificSlider(sliderNumber){
//alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
window.clearInterval(interval);
// move the next slider on deck
$('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
$('#slider' + sliderNumber).css('top', '70px');
$('#slider' + sliderNumber).css('height', '100px');
$('#slider' + sliderNumber).css('width', '100px');
//alert('lol');
// move old slide off,
$('#slider' + currentSlider).animate({
left: '-80px',
top: '50px',
height: '100px',
width: '100px',
opacity: 0
},900,null);
// new slide on
$('#slider' + sliderNumber).animate({
left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
height: '200px',
width: '200px',
top: '20px',
opacity: 1
},900,null);
currentSlider = sliderNumber;
interval = window.setInterval(nextSlider, 5000);
}
</script>