We Keep Coding

Android (Chrome) WebView - Javascript - HTML elements with horizontal scrollbars for overflowX

My Android app has a WebView (min SDK API level 19 - Kitkat) that renders a HTML file with text and other elements. It injects JavaScript code too.
I see that many elements, dispite the overflowX settings I assign to them, still make the document.body overflow.
I managed to set the body not to overfow, while the elements must have "scroll" value to overflowX so the user can see them entirely.
document.body.style.width=window.innerWidth+"px";
document.body.style.maxWidth=window.innerWidth+"px";
document.body.style.overflowX="hidden";
var all = document.body.getElementsByTagName("*");
for (var i=0, max=all.length; i < max; i++)
{
all[i].style.overflowX="scroll";
}
For example there are some
<pre>
elements.
They are horizontally scrollable but no horizontal scrollbar appears so the user is not able to know if ther is further content on the right.
I tried the scrollbar settings on the WebView but nothing changes.
How can I make the horizontal scrollbar appear on those elements, said that the overflowX='scroll' (or 'auto') setting is ignored?

Try overflowX='auto' I hope it helps.

Try this code on your instance of webview.
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setLoadWithOverviewMode(true)

Why does my nav not resize after removing class in JQuery?

I have been working on this website since last week. It is a school project, and I can't figure out why part of it isn't working. When I scroll down, click on the menu button, leave the menu down, then scroll back up, the navbar keeps its height even though I take away the class that resized it. I have attempted to use Google Chrome's developer tools to see what is happening. It just shows the height property crossed out. I have no idea why it won't work, and I have looked for any reason in my code. I also tried it in Internet Explorer to see if chrome was just having problems with it for some reason. It did the same thing there causing me to assume the problem is in my code.
Here is a link to the website it is currently published on: http://www.dragonmath.net/rockets/
Html Code:
http://www.dragonmath.net/rockets/index.html
Javascript Code:
http://www.dragonmath.net/rockets/javascript/main.js
CSS Sheet 1:
http://www.dragonmath.net/rockets/styles/main.css
CSS Sheet 2:
http://www.dragonmath.net/rockets/styles/function.css

got problem!!
After scrolling back to top you didn't change height of nav element;after scroll back make it 40px again it may solve your problem.
if (flag !== 2 && $(window).scrollTop() === 0) {
//add this line
$nav.css({height:'40px'});
$nav.slideUp();
$nav.removeClass("dropDown");
$menu.stop(true,false).slideUp(800, function () {
$heading.css({'margin-left':'40px'})
});
$nav.stop(true,false).slideDown();
flag = 2;
}

How can i create a note on my webpage for iphone user that there is an app?

Hello,
I started to detect which platform is used. And this already works:
// User-Agent-String auslesen
var UserAgent = navigator.userAgent.toLowerCase();
// User-Agent auf gewisse Schlüsselwörter prüfen
if (UserAgent.search(/(iphone|ipod|opera mini|fennec|palm|blackberry|android|symbian|series60)/) > -1) {
// mobiles Endgerät
alert("YOU HAVE A SMARTPHONE");
} else {
// kein mobiles Endgerät (PC, Tablet, etc.)
alert("YOU HAVE NO SMARTPHONE");
}
But now I want to show on the iphone that if you have an iphone a full screen page that there is an app and you should download it. and than a button for the app and a button for "no thank you, continue to normal page".
How can i do this?
Can someone help me?
The page should be full screen and nothing else should be visible.
thank you.

you should follow Apple guidelines for this and use a Smart App Banner: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
If you really want an ad in fullscreen use javascript to show or create a DIV tag that cover the entire screen size. the DIV could simply be styled in absolute position with width/height at 100%
cheers

How can I hide some ID elements using Javascript if the browser window is less than a given size?

I have been looking for an answer to this problem for hours and can't find anything that works.
I need to make some elements if a web page not visible if the browser window width is less than a given size. This is because there are some fixed position "buttons" on the left side of the window which expand when rolled-over, BUT if the window is less than about 1056 pixels in width, the buttons overlap the main page contents.
I have a script for returning the window size and putting that value into a variable.
I have got it to show a message if the variable value is less than 1056. (for testing)
I have seen ways how to make things visible or not with jQuery and and with Javascript but none of them work for me.
The id of the image I'm trying to hide is #go2.
here is a part of the script I have been trying to get to work:
if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';
I have had to use {literal} tags as the pages are using SMARTY templates!
I am very new to javascript and jQuery and wouold appreciate any help.
Thanks.

To make sure that the behavior happens when the user resizes the window, you can also bind to the resize event:
jQuery(window).resize(function() {
if(jQuery(window).width() < 1056) {
jQuery(".hide-these").hide();
}
});

You can do, with jQuery:
if(viewportwidth <1056) {
$('.target').hide();
}
Also, you can hide the elements with CSS3, like so:
#media only screen and (min-width: 1056px) {
#go2 {
display:none;
}
}

CSS3 media queries do what you want without Javascript, however browser support is pretty patchy:
http://www.w3.org/TR/css3-mediaqueries/
Alternatively, you could use Javascript as you've suggested above, with the usual caveats about JS being turned on etc. JQuery makes it easier, if you like Javascript libraries:
http://www.ilovecolors.com.ar/detect-screen-size-css-style/
If not, there are plenty of tutorials you can Google that explain how to query window size with Javascript.

Android Web Development...Div width (more likely inner text) is changing in pixels based on device zoom

I developed an application that interfaces with an institution's emergency alert system. How it works is, when there is an alert, on all of the institution's web pages it displays a scrolling marquee at the top of the page that is put there by javascript using protoype and scriptaculous.
All of this works perfectly on desktop browsers (IE6-8, Chrome, Safari, Firefox, Opera). It also works well on iPhones. My only problem is the rendering on Android.
In researching the problem initially, I found a CSS Property for mobile devices (namely webkit) -webkit-text-size-adjust, that keeps mobile devices from resizing text when zooming and changing screen orientation. I have set this property to 'none' as stated by many articles.
Below is a picture of screen shots from an Android emulator. The left screen shot shows 1x magnification of the page. The spacing between each of the messages is as it should be. The right screen shot shows the page zoomed in. The messages overlap, as the text size is rendered differently, and the div width is not wide enough to contain the text.
http://www.themonkeyonline.com/spacing-example.jpg
Here is the code that places the div on the page:
var marquee = new Element( 'div', { 'id' : 'marquee' + marquee_counter } )
.setStyle( { 'display' : 'block'
, 'WebkitTextSizeAdjust' : 'none'
, 'fontSize' : '12px'
, 'lineHeight' : '25px'
, 'left' : $( marquee_container ).getDimensions().width + 'px' } )
.addClassName( 'marquee_text' )
.update( marquee_text );
$( marquee_container ).insert( marquee );
Is there something I am missing?
I will keep researching the problem in the time being. Thanks to everyone who read all of this.
A brief update...after more testing, it appears that the problem isn't necessarily based on zoom. It looks as if the problem is the viewport. I tested some really long text, and even zoomed all the way out, it has overlapped. It seems as though the div containing the text will not size itself greater than the window.
Here is an example of the code in action:
http://elliottr.www-dev.seminolestate.edu/alert/

Could you post a link to a demo-page where this problem occurs? I tried reproducing it on my Milestone, but couldn't.

Try setting a width to limit div's size (you will also need to set position: relative) and set overflow: hidden, so the text won't go beyond div's size