Image not display correctly inside <div style="display:none;"> - javascript

In a Web Page, I'm trying to get the coords of an adress given by the user.
I'm trying to do something like: http://www.bufa.es/google-maps-latitud-longitud/
But I have a problem. The map is placed inside a div with this structure:
<div id="divgeolocalizacion" style="display:none;">
...
<div style="width:100%; clear:both;">
...
<div style="float:left; width:57%; margin-right:3%;">
<div id="map">
...
<div>
<div>
<div>
<div>
The user has a button on the page, which executes some javascript code. This code only changes the div display style to
"block". The problem is that the map is very very small. However, when I open developers's tools with F12, the image changes its size.
Why i'm getting this strange behaviour? Before you ask, I didn't have any "console.log()" on my javascript code.
Pd: When div's display style is initially set to "block" all works perfectly.

I found this solution by vaelico here: Google Maps Display:None Problem
To solve the problem is necessary to add this line in the javascript after changing the div's display style:
google.maps.event.trigger(map, "resize");

none and block are values of the display property, so you should have either
display: none;
or
display: block;
in your tag's style attribute, not the values alone.

Related

I want to make a scrollable div on x-axis and y-axis in a builder and in that builder

Below is the screenshot of my page where I want to make this scroll functionality, so in this screenshot I want to make this functionality for the given paragraph of a div inside a blue line
Change the line
<div id="xyz">
to
<div id="xyz" style="overflow-y: scroll;">
or you can write in your css or style tag in head as
#xyz
{
overflow-y:scroll;
}
This is working for me.

WinJS Pivot Not Displaying correctly

I have a Windows Phone app using HTML5 and Javascript.
I am using WinJS.Utilities.empty(); to clear the DIV element and then WinJS.UI.Pages.render(); to load pages in to the same DIV:
On one of the pages that is loaded in, I am trying to use a Pivot Control, I am using it declaritively like this:
<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ header: 'current' }">
<div id="current">
Lorum Ipsum...
</div>
</div>
</div>
When the page is loaded in, the Pivot control loads and renders, and the PivotItem headers render correctly. But when the content has been rendered, it is not visible. I have used the DOM explorer in Visual Studio to interrogate the markup and styling to find the issue. It appears that the container DIV elements for the PivotItem contents are out of place and are hidden behind the DIV that contains the PivotItem headers...
When I have tried using this markup in the parent page (rendered without using the WinJS.UI.Pages.render();) it works exactly as expected.
I have also tried creating the Pivot and its Items programmatically, but this produces the same results.
Any help would be greatly appreciated.
Getting me same issue while showing content without template, make some changes in css and it's works for me.
HTML
<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>
CSS
.myPivot {
}
.myPivot div.win-pivot-item {
left:0px !important;
visibility: visible;
width:100%;
}
.myPivot .win-pivot .win-pivot-surface {
width: 100%;
position: fixed;
}

scrollToFixed jquery creating blank div

Using this plugin works great, but when I stop the scroll fixed position, it creates the following div.
<div style="display: block; width: 1621px; height: 104px; float: none;"></div>
The dimensions resemble to size of the div being scrolled.
Example: http://litl.it/ simply scroll past the maps area, then scroll back up and there will be an odd blank space.
Anyone know how to remove this issue? I've found one other example that has been closed, but the issue was resolved with a work around creating extra containers, with additional css to comply with the 'random' div created. I'd like to avoid that if possible.
code:
<section id="devices" data-speed="10" data-type="background">
<h1>litl.it now, bookmark it for later</h1>
<p>we provides an easy link shortening solution with better features above the competition, you can now shorten & bookmark your links with control.
</section>
<section id="demographic" data-speed="7" data-type="background">
</section>
<div id="mapoverlay">
<div class="mapcontainer">
<h1>litl.it it records data of your audience</h1>
<p>here you can see litl.it users litling links across the world!</p>
</div>
</div>
<section id="trackstats" data-speed="4" data-type="background">
<h1>Tracking Stats</h1>
</section>
This issue occurs in the Windows Chrome browser (based upon additional comments from users), here is an example:
Edit: it occurs for me in all browsers, maybe the issue is due to the window being too large, resulting in the bottom of the page preventing the scroll from passing over the target div.
Can I please ask you to attempt creating the issue with a small window to ensure the scrolling div passes over the tracking stats box.

Printing hidden images, each to a different page of a PDF

I have a webpage that is 95% dynamically generated by user selections and content pulled from a DB.
As part of the website the user uses canvases (kind of like powerpoint) and save the completed canvases to images. The images are then stored in the HTML in a div that has display:none.
What I want is the ability to click a button or just press print and have those images be the only things selected to print. Even better would be to print each individual image on a different page.
I have tried using #media print in various combinations with display:none/block and visibility:hidden/visible, but that does not seem to work, there is always residual content on the page.
In fact I cannot even see a print preview of the entire page without adding:
#media print{
*{
display:block;
}
}
Am I having CSS print problems b/c the contents of the page are created dynamically? Or is there another question I should be asking?
Thanks in advance for any help!
To re-iterate my problem: I had images in html that were hidden in a div that was not displayed. I wanted to print only those images to a PDF.
For those interested here is my solution. My HTML looks like this:
<div id="head">
<div id="img_group" style="display:none">
<img href="img 1" />
<img href="img 2" />
</div>
</div>
<div id="contents"></div>
I tried a CSS solution that did not exactly work: #Radoslaw M
* {
display: none;
}
does not work because this overrides any display: block; that follows. So my solution was originally to combine display:none and visibility:hidden the following css worked to display only the id="img_group div:
body{
visibility:hidden;
}
#contents{
display:none;
}
#img_group{
visibility:visible;
}
However the problem with this solution is that visibility:hidden leaves blank space where the div tags should have been.
Here was my round about solution. I used some javascript, a print button, and jsPDF (http://jspdf.com/):
<div id="head">
<button id="print">Print</button>
<div id="img_group" style="display:none">
<img href="data:img 1" />
<img href="data:img 2" />
</div>
</div>
<div id="contents"></div>
<script>
var doc = new jsPDF('landscape','pt', 'computer');
var i = 0;
$('#img_group').find('img').each(function(){
if(i != 0){
doc.addPage();
}
var imgData = $(this).attr('href');
doc.addImage(imgData, 'JPEG', 0, 0, 1067, 600);
i++;
});
doc.save('test.pdf');
</script>
This solved my problem of printing these hidden images to a PDF and even allowed me to print each image to a different page in the PDF. I hope this solution helps anyone else who has this problem in the future!

Problem printing google maps printing and using 'page-break-before' in IE8

I'm having an annoying problem trying to get an html page with a google map on it to print correctly, I have a google map with an <h2> above it all wrapped in a div and the div is set to 'page-break-before:always;' in the css so that the map and its heading always sits on a new page.
The problem is that in IE8 only i can always see a large portion of the map rendered on the previous page when printed, also the part of the map that is visible on the previous page is that which is outside the visible bounds of the map.
HTML:
<div id="description">
<h2>Description</h2>
<p>Some paragraph of text</p>
<p>Some paragraph of text</p>
<p>Some paragraph of text</p>
</div>
<div id="map">
<h2>Location</h2>
<div id="mapHolder"></div>
<script type="text/javascript">
// ... javascript to create the google map
</script>
</div>
CSS:
#map { page-break-before:always; }
Here is a screen grab of what it renders like in IE8
http://twitpic.com/1vtwrd
It works fine in every other browser i have tried including IE7 so i'm a bit lost, has anyone any ideas of any tricks to stop this from happening?
I found out if you add an page-break div with a height eg. 10px with empty html content in front of the Map div, then you can solve the problem.
in CSS:
page_break_before
{ height: 10px; page-break-before:always; }
then in front of the Map div:
var pageBreakDiv = window.document.createElement('div'); pageBreakDiv.id = 'page_break_before'; printingMapDiv.appendChild(pageBreakDiv);
And remove the page-break-before:always; in your #map div.
Cheers,
Jing

Categories

Resources