This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Issue on IE7 when page is scrolling.Text is not proper
When i am scrolling the page the search button is not proper.I have used bootstrap here.
if i am reducing the font size and making the font-weight:normal its fine else i am doing the same in twitter bootstrap document same problem is coming.
HERE IS THE test server url
http://www.onetravel.com/travel/test/ot-bootstrap/index.html
please comment if not able to reproduce in ie7 :-) thanx in advance
I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7).
Please include more info or a reproducible example and I'd be happy to help.
EDIT:
It seems that when then mouse enters the page after scrolling, it redraws the button. Based on my browsing experience, it is hard to notice. I suggest to force it to redraw the button when it becomes visible.
This small jQuery method will handle that, although further optimizations can be made. Please test it and leave a comment if it needs adjustments.
$('#my-button').RedrawWhenVisible();
$.fn.RedrawWhenVisible = function()
{
$(window).scroll(function() {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = this.offset().top;
var elemBottom = elemTop + this.height();
// If element is partially visible...
if((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom)) {
//Redraw it, just once.
if(this.attr('data-redraw')) {
this.hide().show();
// Prevent further draws.
this.removeAttr('data-redraw');
}
} else {
// The element is not visible...
if(!this.attr('data-redraw')) {
// Flag it to redaw on scroll.
this.attr('data-redraw','redraw');
}
}
}
}
EDIT 2:
Since the other button is fine, I bet it's a very specific CSS issue. Double check all of the attributes for those CSS classes, the grey button is fine so check how that button differs from the Orange/Yellow one.
Related
I am dynamically creating elements on a web page which I want to print. I want a page break if the element can't fit in the rest of the A4 size paper.
Example is this question: Force an element to take exactly half of available height in print media
In the picture, A broken element is appearing on first page, which should actually go on the second page.
How can I force a page break if the element does not fit in this page.
**What I tried: **
I tried to use css page-breakafter` property, with the following code:
$(document).ready(function(){
$(".row").each(function(){
if($(this).height()>$(document).height()/2){
$(this).after('<div style="page-break-after:always"></div>');
}
});
});
But it does not work.
Here is a JsFiddle
I noticed in your fiddle that you have applied page breaks only after a few rows. The problem with your jQuery code is that, the $(document).height() will return a huge value compared to each row. In your case, document height = 3861 while each row is only 537. Hence 537 is never greater than 3861/2. Revisit the exact condition you need to apply the page break. I tried window.height instead and it works.
Note: You can only see the difference in print preview
EDIT:
Could you remove all the page break div's you manually added and try the below script.
What I tried is to capture the previous element height and then calculate if he page break is necessary.
For this purpose, I have kept a maxHeight of the document to be 1024 considering how much an A4 sheet can take up. Feel free to adjust the maxHeight according to your paper size.
$(document).ready(function(){
var prevRowHeight = 0;
$(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1024;
var eachRowHeight = $(this).height();
if((prevRowHeight + eachRowHeight) > maxHeight){
$(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
}
prevRowHeight = $(this).height();
});
});
Previous answer was good but there is a bug. You must need total_height. Please Check this I think this code help you. I use this code for a hospital management project for printing system. Thank you.
jQuery(document).ready(function(){
var prevRowHeight = 0;
var total_height = 0;
jQuery(".row").each(function(){
// console.log($(this).height());
var maxHeight = 1000;
var eachRowHeight = jQuery(this).height();
total_height += prevRowHeight + eachRowHeight;
alert('now : '+total_height +' , Was: '+ prevRowHeight);
if(total_height > maxHeight){
jQuery(this).before('<div style="page-break-after:always"></div>');
console.log("add page break before");
now_height = 0;
}
prevRowHeight = jQuery(this).height();
});
});
I have 1 Issue with the megamenu on site link
screenshot
Sometimes the menu drop down shifts to right . This happens on both chrome and firefox .
It is not a regular issue it only happens sometimes.
what i assume it may be a css issue becouse when ever it happens and i inspect element with a chrome css extension ..automatically the box shifts to the correct place without refreshing
the megamenu code is attached
$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
$(window).resize(function(){
setTimeout(function(){
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
}, 200);
});
});
The theme is sns korion
I checked out your css. You are handling your visibility toggle with visibility and opacity. Pick one. In this particular case, I would pick opacity because of the transitions you are running.
Also, your transform css with scale is placing the dropdowns in a different place and using scale to place them in the right place by size. But, contradictory to this technique, you set the transition to none afterwards. This is all a back forth positioning that messes up with the display if the keyframes stop unexpectedly.
SO delete all your transitions in line 6599 in your theme-light-green.css and all your transitions and transforms in line 6462 same stylesheet.
Also remove the visibility in both lines and the opacity in 6599. (you already have it in 6462.
Good luck
For some reason the cursor gets not changed if the window is not focused. While moving, the mouse it is updating correctly. This occurs at least in IE11 & Chrome, but not in FF.
Is there a way to fix/workaround that issue or is this maybe the expected behaviour?
Here some little test code:
var cursors = ['default','text','no-drop','progress','all-scroll'];
var cursor = 0;
var body = document.getElementsByTagName('body')[0];
setInterval(function(){
cursor = (cursor +1 ) % cursors.length;
body.innerText = cursors[cursor];
body.style.cursor = cursors[cursor];
}, 1000);
http://jsfiddle.net/4DTpp/
It is an expected behaviour.Because if browsers allow this, there will be a security issue as mentioned here.
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
I have few pages that I show from my main page inside iframe.
I got a background image in the main page, when I click the button to change the page inside the frame the frame background color is becoming white somtimes until the page is visible.
I added background-color:transpert to the pages themselves and to the main page CSS.
I checked the site with FireFox and IE and it look fine (the background of the frame doesn't change) but with Chrome it somtimes rendering fine like I wanted it to be and other times the iframe background goes White.
Can i do anything that will fix that?
As this is browser behavior I doubt it can be really "fixed".
One workaround is to hide the frame while it's loading (only for Chrome) - here is the code:
var isChrome = (navigator.userAgent.indexOf("Chrome") >= 0);
function LoadFrame(url) {
var oFrame = document.getElementById("myframe");
if (isChrome) {
oFrame.style.visibility = "hidden";
oFrame.onload = function() {
oFrame.style.visibility = "visible";
};
}
oFrame.src = url;
}
Live test case. (Reloading same frame there but the concept is the same)
I used very similar attitude. This approach works only in case the page inside your iFrame is under your controll.
The change is that the page inside iframe finds the iframe in parent window and makes it visible again:
<iframe style="visibility: hidden;" id="iframe_id" src="my_page.html" />
// inside my_page.html:
window.onload = function() {
// make sure the parent iframe is visible
if (window.parent)
{
var nodeIframe = window.parent.document.getElementById(window.name);
if (nodeIframe)
{
nodeIframe.style.visibility = "visible";
}
}
};