In my page I use ajax loader gif. When the button is clicked the ajax loader is shown, however the text below it moves to upwards and I want them to be constant I mean not to move.
Is there a way to do this? Thanks for help.
It can be seen from here as well:
http://www.dilyurdu.com
function AjaxLoader()
{
document.getElementById("translation").innerHTML="<img src='ajax-loader.gif' />"
$.ajax({
type: "POST",
url: "test1.php",
success: function(response) {
$("#translation").html("hello");
}
});
}
<div class="informationArea">
<h2><span id="infoaream">caballo</span></h2>
<div id="wordDetailArea">
<h2>Translation:</h2><p><span id="translation">dog</span></p>
<h2>Context:</h2><p><span id="context">I have got a dog.</span></p>
</div>
</div>
This is because the height of <p> tag changes according to its content.
The fix is to use a fixed height.
<p style="height: 25px;"><span id="translation">dog</span></p>
Note: As of ajax request the length of your content may not be consistent. So you should choose a highest value for height
What happens is that your #translation span has a height of 18px, however the ajax-loader.gif has a height of 16px causing the jump, spans and p are inline elements and expand and contract depending on the information that's in them
<div id="translation" style="height: 18px;">hello</div>
or
<span id="translation" style="display:block;height: 18px;">hello</span>
should do the trick.
Related
I've this AngularJS demo app using Highcharts:
http://jsfiddle.net/dennismadsen/dpw8b8vv/1/
<div ng-app="myapp">
<div ng-controller="myctrl">
<button ng-click="hideView()">1. Hide</button>
<button ng-click="showView()">2. Show</button>
<div id="container" ng-show="show">
<highchart id="chart1" config="highchartsNG"></highchart>
</div>
</div>
</div>
If you change the width of the result view in JSFiddle, the Highchart will automatically resize it's width to the size of the container (the div with black border).
I've noticed that if Highchart is hidden, and the window is resized, it is not resized automatically (like iPad changing Landscape/Portrait orientation). Try this out by first clicing the "1. hide" button, change size of the result view, and then press the "2. show" button. See this example:
How can I force the highchart to resize even if it's not visible?
As per the documentation, we need to trigger the reflow method in scenarios where resize event cannot be captured by the chart.
Triggering reflow method in $timeout will render the chart properly.
$scope.showView = function () {
$scope.show = true;
$timeout(function () {
$scope.highchartsNG.getHighcharts().reflow()
});
}
Working Fiddle
I think it's a correct behaviour.
But considering that the resize event event fix the graph size, you can trigger a resize after the graph is shown, like:
setTimeout(function () {
$(window).trigger('resize');
}, 1);
It's the jQuery way, I think there's an angular too, but I'm not familiar with it.
I have a site I created: http://www.raggeddaisy.com
On my Wooden Signs pages and Chalkboards pages, the 'Request More Information', only the top little bit of the button is clickable. The code is the same as my Magnetic Board and Wooden Benches pages. Why would this be? Thanks in advance for your help.
<div id="requestInfoButton">
<form action = "ContactUs.cshtml">
<input type="submit" class="button" value="Request More Information">
</form>
</div>
#requestInfoButton {
font : 10pt 'Century Gothic';
padding-top : 2.25pt;
position : absolute;
left : 500.00pt;
top : 400.50pt;
width : 150pt;
height : 16.50pt;
}
That's because your div with id 'optionsWoodenSignLargePrice' is covering it. I wouldn't advice the styling you've used for just the text and especially the absolute positioning.
However, removing the width and height attributes from the div#optionsWoodenSignLargePrice styles does solve your problem.
It looks like you have two divs that are absolutely positioned with a fixed width that cover the majority of that request more info button. If you remove the width on div#optionsWoodenSignSmallPrice and div#optionsWoodenSignLargePrice your button will be clickable.
When embedding a Bootstrap app in an iframe, modal dialogs always open at the top of the iframe, not the top of the screen. As an example, go to http://getbootstrap.com/javascript/ and open an example modal on the page. Then using the sample code below which places the same bootstrap page in an iframe, find a modal and open it:
<html>
<head>
</head>
<body>
<table width="100%">
<tr><td colspan="2" style="height:80px;background-color:red;vertical-align:top">Here's some header content I don't control</td></tr>
<tr><td style="width:230px;height:10080px;background-color:red;vertical-align:top">Here's some sidebar content I don't control either</td>
<td valign="top">
<iframe width="100%" height="10000px"
scrolling="no" src="http://getbootstrap.com/javascript/">
</iframe>
</td>
</tr>
</table>
</body>
</html>
Demo in fiddle
How do I go about positioning the modal on the screen in this scenario?
UPDATE: Unfortunately, my iFrame cannot fill the screen, nor can I make it fixed since it needs to blend into the rest of the page and the page itself has enough content to scroll. This is not my design and I ultimately intend to rework the whole thing, but this is what I have to work around for now. As a temporary option, I'm using javascript to tell the iframe parent to scroll to the top where the modal dialog pops up. While this is acceptable, this isn't the desired behavior.
I'm using angularjs and the ui-bootstrap library in my code but as you can see above, it's a bootstrap issue.
If your iframe has the same document.domain as the parent window or it is a sub domain, you can use the code below inside the iframe:
$('#myModal').on('show.bs.modal', function (e) {
if (window.top.document.querySelector('iframe')) {
$('#myModal').css('top', window.top.scrollY); //set modal position
}
});
show.bs.modal will fire after you call $('#myModal').show()
window.top.scrollY will get the scrollY position from the parent window
In case your document.domain differs from the parent, you can hack it getting the onmousedown position inside the iframe. For example:
$('#htmlElement').on('mousedown', function (event) {
event.preventDefault();
$('#myModal').data('y', event.pageY); // store the mouseY position
$('#myModal').modal('show');
});
$('#myModal').on('show.bs.modal', function (e) {
var y = $('#myModal').data('y'); // gets the mouseY position
$('#myModal').css('top', y);
});
Quite old question but I don't see the solution/workaround I've found. It might be helpful for someone in the future.
I had the same issue - my iFrame doesn't fill the entire screen, it displays bootstrap's modal and it is loading content from different domain than the parent page.
TL;DR
Use window.postMessage() API - Documentation here. for communication between parent and iframe (cross-domain)
pass message with currentScrollPosition and Y position of your iframe
Reveive message and update modal's padding from the top
In my case the workaround was to use window.postMessage() API - Documentation here.
It requires to add some extra code to the parent and handle message in an iFrame.
You can add EventListener and listen to 'scroll' event. Each time the event handling function is invoked you can get currentScrollPosition like document.scrollingElement.scrollTop.
Keep in mind that your iframe can have some margin from the top in the parent page so you should also get its 'offset'.
After that you can post these two values to your iframe e.g. ncp_iframe.contentWindow.postMessage(message, '*');
Note that the message has to be a String value
After that in your iFrame you need to add EventListener and listen to 'message' event.
The event handling function will pass your 'message' in event.data property. Having that you can update modal padding. (Looks much better if you don't use animations e.g. fade, in classes);
Quick Example:
Parent:
window.addEventListener('scroll', function(event){
var myIframe = document.querySelector('#myIframe');
var topOffset = myIframe.getBoundingClientRect().top + window.scrollY;
var currentScroll = document.scrollingElement.scrollTop;
myIframe.contentWindow.postMessage(topOffset + ':' + currentScroll, '*');
});
iFrame:
window.addEventListener('message', function(event) {
var messageContent = event.data.split(':');
var topOffset = messageContent[0];
var currentScroll = messageContent[1];
//calculate padding value and update the modal top-padding
}, false);
This is a bug in most browsers (IE appears fine) where the elements are fixed to the iframe, not the window. Typically, if you need something to be relative to the main document, it has to be in the main document.
A workaround is to wrap your iframe in a fixed position div that takes up the whole width of the screen and then maximize the iframe within that. This appears to resolve the issue
HTML:
<div class="fixframe">
<iframe src="http://getbootstrap.com/javascript/"></iframe>
</div>
CSS:
.fixframe {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.fixframe iframe {
height: 100%;
width: 100%;
}
Working Demo in fiddle
See Also:
position:fixed inside of an iframe
iframe with a css fixed position : possible?
position fixed div in iframe not working
It is because the class .modal has position: fixed attribute. Try position: relative instead.
I am creating a division, in which there are some elements. For the example below, there is a sentence inside a division. However when the sentence becomes very long when I insert something through ajax, it seems like the height of the division does not change.
<div style="width:300px;min-height:10px;background:red">
<div style="width:100px;height:inherit;background:blue;float:left"></div>
<a style="width:100px;height:10px;float:left">The length of this sentence is always changing.</a>
</div>
you have to set the height for the div using javascript or using jquery
assign a ID to div e.g
<div style="width:300px;min-height:10px;background:red" id="test">
<a>The length of this sentence is always changing.</a>
</div>
$.ajax({
$(function() {
$("#test").width(100).height(200);//set height or width here
});
});
try to set the height here...
I have multiple eventlisteners to my div: dragstart, dragenter, dragover, dragleave, drop and dragend.
To attach them to my div, I use the body onload function:
function addListeners()
{
var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false);
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
}
but this code adds the eventlistener to the whole div. I only want the header of the div to respond to these events:
Now I can click on any part of the div and drag it, but I only want to be able to click on the black part (header) of the div to move it. The black part is a simple header in CSS.
HTML
<body onload="addListeners()">
<div id="columns">
<div class="column" draggable="true"><header>A</header>Textual information inside div A</div>
<div class="column" draggable="true"><header>B</header>Textual information inside div B</div>
<div class="column" draggable="true"><header>C</header>Textual information inside div C</div>
</div>
</body>
A JSFiddle of my full page can be found here.
How can this be done?
You need to add EventListeners to your header elements.
but those event listeners will work only when your headers are draggable=true
so by adding EventListeners to the header and making it draggable=true you can start to drag it.
But there is one problem now, you don't want to drag just the header, but its entire content i.e its parent div. and you want to swap it with the parentNode.innerHTML of the other header(upon which you are dropping).
so, you need to do this:
add events to the header element,
perform all the other operation i.e. grabbing and then swapping innerHTML on the parent of the header i.e. this.parentNode
also when you perform the innerHTML swap, all the event listeners are lost,because now, the very draggable element is recreated, so you will have to call your event binding function addListeners() again.
working fiddle