Margins for video in webview - javascript

I am trying to embed a youtube video inside a webview and it seems there is a small margin on the right-side of the video which is not going away.
I saw many other Questions like these and tried fixing the javascript but still the margin is there.
Here is my code :
video = (WebView) v.findViewById(R.id.videoview);
// video.getSettings().setLoadWithOverviewMode(true);
// video.getSettings().setUseWideViewPort(true);
String widthAndHeight = "width='null' height='null'";
String videoURL = "http://www.youtube.com/v/DZi6DEJsOJ0";
video.setHorizontalScrollBarEnabled(false);
video.setVerticalScrollBarEnabled(false);
video.getSettings().setJavaScriptEnabled(true);
video.getSettings().setPluginsEnabled(true);
String temp = "<object "
+ widthAndHeight
+ ">"
+ "<body style='margin:0;padding:0;rightmargin:0'>"
+ "<param name='allowFullScreen' value='true'>"
+ "</param><param name='allowscriptaccess' value='always'>"
+ "</param><embed src='"
+ videoURL
+ "'"
+ " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
+ widthAndHeight + "></embed></object>";
video.loadData(temp, "text/html", "utf-8");
I tried giving the style:body=0'margin=0 tag inside the javascript . I don't know how to upload the screenshot as i am debugging on my phone but its a video with a margin of about 6pixels on the right of the video while the left hand side and the top of the video are aligned with the screen.

Well, HTML is left-aligned by default, so, in case you have a margin on the RIGHT hand side, this means that margin:0 worked. However, setting the right-hand side margin to 0 won't help as it doesn't mean the object would fill.
Try to say
+ " type='application/x-shockwave-flash' style='margin:0;width:100%;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
If setting width to 100% for the embed doesn't work, perhaps try to set the width to the device screen's width, and don't forget to update on orientation.

So after much researching and trying to figure out how it works i have this working code for whoever who might need it in the future :
Display display = getActivity().getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int widthdp = (int) (width / getResources().getDisplayMetrics().density);
int height = display.getHeight();
int heightdp = (int) (height / getResources().getDisplayMetrics().density);
String widthAndHeight = "width=" + widthdp + "height=" + heightdp;
String temp = "<object "
+ widthAndHeight
+ ">"
+ "<body style='margin:0;padding:0;'>"
+ "<param name='allowFullScreen' value='true'>"
+ "</param><param name='allowscriptaccess' value='always'>"
+ "</param><embed src='"
+ videoPoP
+ "'"
+ " type='application/x-shockwave-flash' style='margin:0;padding:0;' allowscriptaccess='always' allowfullscreen='true'"
+ widthAndHeight + "></embed></object>";
video.loadData(temp, "text/html", "utf-8");
The problem was getting the width and the height for the screen would screw up the density pixels and normal pixalation problems.

Related

How do you resize an image in javascript

I have a HTML editor that inserts items from predefined buttons using javascript and would like add a button to be able to post a thumbnail of a downloaded image with a link to view it full size. I have created the following code but it doesn't work and always inserts a 100X100 size image. Can anyone suggest a better way that does work?
// insert HTML code
insertHtml: function (url, title) {
var imgHeight;
var imgWidth;
function setHTMLImageSize() {
imgHeight = this.height;
imgWidth = this.width;
var ImageRatio = (imgHeight / imgWidth);
if (imgWidth > 100) {
imgWidth = 100;
imgHeight = (imgWidth * ImageRatio);
}
return true;
}
var myImage = new Image();
myImage.name = url;
myImage.onload = setHTMLImageSize;
myImage.src = url;
if (imgWidth = 0) {
imgWidth = 100;
}
if (imgHeight = 0) {
imgHeight = 100;
}
this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>");
}
You are setting width and height to 100 before the onload function has fired. The onload will happen asynchronously so you should do a check for zero height or width inside the callback.
Edit:-
As observed by enhzflep in the comment below you have also used equal as assignment rather than to check conditions. I'd change them to triple equals === as a rule when you know the type you are expecting.
Is it not going to be simpler to control a thumbnail through CSS anyway? You could set max-height and max-width properties to maintain aspect ratio.
Thanks to everyone ... from the CSS suggestion I have resolved the issue by removing all the code to determine the image size and instead including a style attribute setting the width to 100 and the height to auto into the HTML image code being added to the editor ... see below
this.get_designPanel().insertHTML("<br/>Thumbnail view<br/><a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none;" + "\" ><img style=\"" + "width: 100px; height: auto" + "\" src=\"" + url + "\" alt=\"" + title + "\" title=\"" + title + "\" /></a><br/>Click image to view in seperate window<br/>");

hide or delete image src=undefined

I'm working with markers on google map and this is what happens
I call this variable to the images and upload to the database and use a query to put two images into a single file (GROUP_CONCAT)
var image = markers[i].getAttribute("image");
image = image.split(",");
And here I show these pictures.
var html = div id = "iw-container" +
'a Href="'+image[0]+'" data-lightbox="roadtrip" <img src = "' + image [0] +" "width = 100" height = "100" / a '+
'a Href="'+image[1]+'" data-lightbox="roadtrip" <img src = "' + image [1] + '" width = 100 "height =" 100 " / a '+
'a Href="'+image[2]+'" data-lightbox="roadtrip" <img src = "' + image [2] + '" width = 100 "height =" 100 " / a '+
'/ Div';
The problem is if a marker is less than 3 images, for example a marker has 2 images, one of the images appear broken. obviously because not defined. ()
I wonder if there is any function or something to check if an image has the "SRC" undefined, remove it or hide it or do something to not appear.
Any help is good, thanks :)
Code like this should get you past this issue:
var html = '';
for(var i=0;i < image.length; i++) {
html += image[i];
}

InfoBubble not calculating div height properly in Safari

I'm trying to use a customized Info Window implementation with Google Maps API v3 called InfoBubble. As I was doing my development locally, Safari rendered the bubbles fine. However, when I uploaded it to a live server, it no longer calculated the heigh of the bubble content correctly and displays a scrollbar (which I don't want) (see http://luketilley.com/maps/).
I have done some investigating and it looks like the problem comes from this bit of code:
InfoBubble.prototype.getElementSize_ = function(element, opt_maxWidth,
opt_maxHeight) {
var sizer = document.createElement('DIV');
sizer.style['display'] = 'inline';
sizer.style['position'] = 'absolute';
sizer.style['visibility'] = 'hidden';
if (typeof element == 'string') {
sizer.innerHTML = element;
} else {
sizer.appendChild(element.cloneNode(true));
}
document.body.appendChild(sizer);
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
// If the width is bigger than the max width then set the width and size again
if (opt_maxWidth && size.width > opt_maxWidth) {
sizer.style['width'] = this.px(opt_maxWidth);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
// If the height is bigger than the max height then set the height and size
// again
if (opt_maxHeight && size.height > opt_maxHeight) {
sizer.style['height'] = this.px(opt_maxHeight);
size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
}
document.body.removeChild(sizer);
delete sizer;
return size;
};
Specifically, this line:
var size = new google.maps.Size(sizer.offsetWidth, sizer.offsetHeight);
Upon investigating what values safari reports, I confirmed that safari does indeed report different values when displaying the page locally vs. online.
Doing more testing, I also found that the issues only start when I add an image to the info bubble (check the marker off the coast of Africa).
here is the content that I'm trying to put in the info_bubble
info_content = '<div class="bubble">' +
'<h1>' + markerData.name + '</h1>' +
'<div class="icons">' +
icon_html +
'</div>' +
'<img src="' + markerData.image + '"/>' +
'<p>' + markerData.description + '</p>' +
'<p><a target="_blank" href="' + markerData.url + '"><img src="learn_more.png"/></a></p>' +
'</div>';
Any ideas on what's happening here? is there a better way to calculate the required size?
Update: This may be a bug with Safari. I just spent some time in the debugger and if I set a breakpoint and manually step through the functions, it does the right thing, but if I just let it run, it continues to misbehave. So I guess the question is now: is there a workaround?

First a tag created in a Javascript loop not implemented

I am trying to populate a div (class='thumb") with thumnailpictures. The name of the pictures is gathered from an xml file. Every thumnail picture is encapsulated with an a-tag that points to a function to show the full picture.
On some browsers the first thumbnailpicture seems not to have this a-tag...clicking on it gives no action...
var rubriek = gup('rubriek'), // rubriek is a parameter in the url of this page pointing a specific photogallery
gallerij = rubriek + "gallery.xml",
xmlDoc = loadXMLDoc(gallerij),
x = xmlDoc.getElementsByTagName("filename"),
legebron = x[0].childNodes[0].nodeValue;
for (i = 0; i < x.length; i++) {
var beeldnummer = x[i].childNodes[0].nodeValue,
index = i + 1,
kleinbeeld = "/" + rubriek + "images/thumb/" + beeldnummer;
$('.thumb').append('<p><a class="kleintje" onclick="toonDezeFoto("' + beeldnummer + '",' + index + ',' + x.length + ');">
<img src="' + kleinbeeld + '" id="' + index + '">
</a></p>');
}
See http://www.karinedaelman.be/foto.php?rubriek=Mensen/
Found the solution: the z-index of the div that keeps the thumbnails was too low. Another div that has the site logo in it had a higher z-index and a width of 100%. Because of that the first thumbnail image was on a layer below the site logo and could not be accessed by the mouseevents....

Javascript Popup IE Error

I've stepped into a new position and am tasked with cleaning up pre-existing code. I will be posting a Javascript function for building hotel reservations by using a base URL and then carrying over variables to the other site.
More clearly, this function allows your to access Site A and search for hotel reservations on Site B. The function makes this even clearer.
function buildReservationURL(){
var site = "http://ach.travel.yahoo.net/hotel/HotelCobrand.do?smls=Y&Service=YHOE&.intl=us&.resform=YahooHotelsCity&";
<!-- Variables Are Defined Here from Form Values //-->
var finishedURL = site + "city=" + cityname + "&state=" + statename + "&dateLeavingDay=" + inDay + "&dateReturningDay=" + outDay + "&adults=" + adults + "&source=YX&distance=&hotelChain=&searchMode=city&cityCountryCode=us&&dateLeavingMonth=" + inMonth + "&dateReturningMonth=" + outMonth;
NewWindow(finishedURL,'Yahoo Travel','780','580','yes','no','1');
}
However, I am receiving an error in IE that gives zero information. The error occurs prior to a window being created so I feel the error would reside somewhere in the function where it is created and the URL is built. This does work fine in FireFox. Any ideas?
Could it be you're using a version of IE that doesn't support spaces in the window name? ("Yahoo Travel" in your example.)
Use IE8's debugger and use "break on error." If it doesn't break in IE8, turn on compatibility view. That uses the IE7 javascript engine while still giving you IE8 debugging facilities.
function NewWindow(mypage,myname,w,h,scroll, menu, res) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height=' + h + ',width=' + w + ',top=' + wint + ',left=' + winl + ',scrollbars=' + scroll +
', resizable=' + res + ', location=no, directories=no, status=yes, menubar=' + menu;
win = window.open(mypage,myname,winprops);
if(parseInt(navigator.appVersion) > 3){
win.window.focus();
}
}

Categories

Resources