I am looking for a simple way to change my data-placement attribute based on window width for my popover in bootstrap. Below is my current html and jquery code. It works, but the data-placement for my popover does not change as I adjust the window size. Only if I refresh the page with a small window size does it actually work.
<a class="arrow" id="arrow" data-toggle="popover" data-content=""><span class="glyphicon glyphicon-menu-right" id="glyph"></span></a>
<script>
$(window).resize(function(){
console.log('resize called');
var width = $(window).width();
console.log(width);
if(width < 974){
$('#glyph').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
$('#arrow').attr('data-placement','bottom');
$('.myInfo').css("margin-top", "10px");
$('.myInfo').css("margin-left", "30px");
}
else if(width > 974){
$('#glyph').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
$('#arrow').attr('data-placement','right');
$('.myInfo').css("margin-top", "60px");
$('.myInfo').css("margin-left", "40px");
}
})
.resize();
</script>
Everything works except when I change the width of page and click on the popover button again. The data-placement does not change. Suggestions? Thanks in advance!
Duplicate of this question answered by bchhun
Pass in the placement position as a function:
var options = {
placement: function (context, source) {
if ($(window).width() < 974) {
return "bottom";
} else {
return "right";
}
}
};
$("[data-toggle=popover]").popover(options);
$(window).resize(function(){
var width = $(window).width();
if(width < 974){
$('#glyph').removeClass('glyphicon-menu-right').addClass('glyphicon-menu-down');
$('.myInfo').css("margin-top", "10px");
$('.myInfo').css("margin-left", "30px");
}
else if(width > 974){
$('#glyph').removeClass('glyphicon-menu-down').addClass('glyphicon-menu-right');
$('.myInfo').css("margin-top", "60px");
$('.myInfo').css("margin-left", "40px");
}
})
.resize();
This Bootply shows it working. Hope this helps!
Related
I want to have a box were when I resize my windows to a smaller width, it should also change the height of that box. it is supposed to be used in a responsive site, but when I try to make it work the height only change when I actually change the height of my windows, and the results it is giving is a box with white boxes. Just for info I am also using Transform:Translate() to move the picture inside around. its a little hard to actually give a code, because I don't care what type of code I am using.
You can use the vw value for resizing the height of an element relative to the viewport width.
E.g.
HTML:
<html>
<div>
<div>
</html>
CSS:
div {
height: 10vw;
background-color: red;
}
JSFiddle
Try this javascript code to get your browser window width:
function getWindowWidth() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
Or using to handle resize window event:
$( window ).resize(function() {
$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
// Put your code here for resizing your element
});
I'm using this code : http://codepen.io/andytran/pen/xweoPN/ to create an information card slider but i think the code <div class="card"> is having some problems when put in a modal.
I've created a pen with my current code, Kindly review it and suggest the changes to remove that blank card while clicking on the modal. https://codepen.io/anon/pen/bWmYxN
In the first card a blank card with the text how it works is present, how to remove that blank card?
I am not quite familiar with the libraries that you used here. But anyway, something like this can fix your issue if nothing else works out.
$("#modalBtn").click(function() {
setTimeout(
function(){
$("#next").click();
}, 250
);
});
EDIT:
Sorry about that, I forgot that you should add an ID to your button that calls the modal.
<button id="modalBtn" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
you just need to put this code only in $(document).ready
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
so your jquery code will be
$(document).ready(function() {
window.setTimeout(function() {
$('#myModal.products').height(283);
},200);
var getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
function calcProductHeight() {
getProductHeight = $('.product.active').height();
$('.products').css({
height: getProductHeight
});
}
function animateContentColor() {
var getProductColor = $('.product.active').attr('product-color');
$('body').css({
background: getProductColor
});
$('.title').css({
color: getProductColor
});
$('.btn').css({
color: getProductColor
});
}
var productItem = $('.product'),
productCurrentItem = productItem.filter('.active');
$('#next').on('click', function(e) {
e.preventDefault();
var nextItem = productCurrentItem.next();
productCurrentItem.removeClass('active');
if (nextItem.length) {
productCurrentItem = nextItem.addClass('active');
} else {
productCurrentItem = productItem.first().addClass('active');
}
calcProductHeight();
animateContentColor();
});
$('#prev').on('click', function(e) {
e.preventDefault();
var prevItem = productCurrentItem.prev();
productCurrentItem.removeClass('active');
if (prevItem.length) {
productCurrentItem = prevItem.addClass('active');
} else {
productCurrentItem = productItem.last().addClass('active');
}
calcProductHeight();
animateContentColor();
});
// Ripple
$('[ripple]').on('click', function(e) {
var rippleDiv = $('<div class="ripple" />'),
rippleSize = 60,
rippleOffset = $(this).offset(),
rippleY = e.pageY - rippleOffset.top,
rippleX = e.pageX - rippleOffset.left,
ripple = $('.ripple');
rippleDiv.css({
top: rippleY - (rippleSize / 2),
left: rippleX - (rippleSize / 2),
background: $(this).attr("ripple-color")
}).appendTo($(this));
window.setTimeout(function() {
rippleDiv.remove();
}, 1900);
});
});
Thats it
Hope this helps
The problem was I forgot assigning the active class to the product class
<div class="product-active">
this will make the first screen to appear and if there's no active class, then it'll show a blank screen since it doesn't know what to show. A small typo got me on feet. Anyways, this is for the future reference if anyone makes a silly mistake like this.
Thanks.
I have horizontal tabs 1 as,
How can I make tabs vertical on window resize than it has been overflowed?
like this:
I don't want usign #media because tabs are dinamic and may be only 1-2 tabs and it will display good in horizontal view
Use JS/jQuery to calculate total width of tabs and check if it's grater than container width.
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
$('.tabs-container')
.toggleClass('v-tabs', totalWidth >= availableWidth)
.toggleClass('h-tabs', totalWidth < availableWidth);
You could use Jquery to add a new class on a window resize
$( window ).resize(function() {
$("tabs").addClass("nice looking class");
}
other than this i would use a responsive grid.
Basically join Justinas and Troajans answers together:
function checkTabWidths(){
var totalWidth = 0;
var availableWidth = $('.tabs-container').width();
$('.tabs-container').removeClass('v-tabs h-tabs');
$('.tabs').each(function () {
totalWidth += $(this).outerWidth(true);
});
if (totalWidth >= availableWidth) {
$('.tabs-container').addClass('v-tabs');
} else {
$('.tabs-container').addClass('h-tabs');
}
}
$( window ).resize(function() {
checkTabWidths(); // Check widths on resize
}
checkTabWidths(); // To check on load
You can use jquery to do that:
//first get the container width
var container=$("#containID").width();
//then get the total width of each tabs
var totalWidthOfTabs=0;
$("#containID .tabs").each(function(){
totalWidthOfTabs+=$(this).width();
});
//when window resize, do something
$( window ).resize( function(){
if(totalWidthOfTabs>container){
$("#containID .tabs").css("width","100%");
}
});
just an idea to do what you want. I do not check it whether it is correct or not, you can change it if the example is wrong~
I'm working on a website where if the browser window is smaller than a certain size, part of the background clashes with the text. Is it possible to change the background after a browser window becomes smaller than a certain amount?
You can hook into the window.onresize event to check the width and height of the window, then based on these values you can set the background color to what you desire.
window.onresize = function(event) {
var height = window.innerHeight;
var width = window.innerWidth;
}
This solution may have compatability issues in other browsers to IE and so the jQuery function is probably more prefered:
$( window ).resize(function() {
var height = $(this).height();
var width = $(this).width();
});
EDIT: (Example provided)
<script type="text/javascript">
window.onresize = function (event) {
var height = window.innereight;
var width = window.innerWidth;
if (width < 500 || height < 500) {
document.getElementById('Div1').style.backgroundColor = '#FF0000';
}
}
//OR WITH JQUERY
$(window).resize(function () {
var height = $(this).height();
var width = $(this).width();
if (width < 500 || height < 500) {
$('#Div1').css('background-color', '#FF0000');
}
});
</script>
<div id="Div1" style="width: 300px; height: 300px;">
test div
</div>
Please not that when using the innerHeight property in Chrome that the value is returned as undefined and so this does not seem to be supported. The jQuery method would be the preferred solution.
i'm working on a website and wondering if there is any code that I can add to a "Fixed in Window" Item that will be visible once a visitor has scrolled 200 Pixels, for example.
Couldn't find anything specifically for this in any other questions.
Cheers
My bad, I found this, perhaps this is what I'm looking for Use jQuery to show a div only when scroll position is between 2 points. Correct me if I'm wrong :-)
You can detect scrolling position with use of j Query and then if scroll is moved hide your div. Below given is example code. please review it and work on it little bit according to your requirement it is working fine with me.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
//use your css property here if you want to display none a div
display: none,
bottom: "auto"
});
}
}).scroll();
});
});//]]>
</script>