FAQ Database Discussion Community


Ext JS 5 - add grid panel to viewport

javascript,extjs,viewport,gridpanel
I'm looking for a way to add a grid panel to my viewport, I tried to use the add() function but this didn't work for me. Ext.application({ name : 'MyApp', launch : function() { Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', html: '<h1 class="x-panel-header">Page Title</h1>', border: false, margin: '0...

percentage width in css not working

html,css,width,viewport,percentage
I was using a way to define my width property in css with the viewport measurement, css code: #content { position: absolute; background-color: white; width: 100vw; top: 115px; bottom: 30px; display: table; z-index: 0; } When I changed the width from width: 100vw; to width: 100%; my code ain't working...

No matter what, section won't become 100% browser height

html,css,responsive-design,viewport
Here's the website: jasontheodore.com I am just trying to place some heading text directly in the center of a div that takes up 100% of the browser height. The code is as follows: HTML: <section id="landing-page"> <div id="logo"> <h5>Jason Theodore Bain</h5> <h4>graphic designer . marketer</h4> </div> </section> CSS: html, body...

jQuery resize and viewport checkpoint

javascript,jquery,css,viewport
I have a small problem with my script. I want to change body background colour based on width of screen. My problem is I don't know that I have to change to make it work from under 960 to 1130. Ex: Let's say I rezise my browser. 1300px -> 1150px...

I want to make a viewport for a canvas game

javascript,html5,canvas,viewport
So I have a game(that is more of a map) that loads a bunch of tiles and places them together. The tiles load just fine, but I'd like to move the viewport. I've looked into this subject, and I have a function that checks the keyboard. If 'd' is being...

Why use rem instead px when it's the same anyway?

html,css,viewport,pixel
Okay, first off, yes I have read many many articles (Should I use px or rem value units in my CSS?) and forums about this. I know that 1px is not a physical pixel but rather a CSS pixel, and rem is basically the same as em, but it is...

Libgdx Viewport with stage not working [Fixed]

java,android,libgdx,viewport,scene2d
So 2 months ago i stumbled upon the problem that my game that i was working on did not scale with other devices. So i decided to implement viewports since people said that it was the best way and also an easy way. But its been around 2 months since...

Listener for Direction of Resize

javascript,jquery,user-interface,viewport,onresize
I have a right pointing triangle. ▶ On resize, the triangle should move in the direction of the resize, and when it changes direction, the triangle should flip horizontally, without ever going out of the screen. Is there a way to listen to the direction (LEFT / RIGHT) in which...

How to Remove class or activate class for specific view port only

css,mobile,media-queries,viewport,tablet
Not sure if this would require Javascript, or if there is a way to do this with CSS alone. Basically I want to have a class active only for medium and small size browswers. Example: <style> .big {font-size: 2em;} .normal {font-size: 1em;} </style> <div class="big"> <p> This text is huge...

jQuery 2.1 | Highlight first
  • completely visible in scrollable
      viewport
  • jquery,html-lists,viewport
    I'm trying to adapt this code from Stackoverflow for my specific needs. I need to highlight via addClass the first <li> that is completely visible in a scrolling <ol> viewport, regardless of length of <li>. I swapped the $(window) scrolling part of the code for a scrollable <ol> which nearly...

    White margin error on site when viewing on landscape ipad bootstrap 3

    twitter-bootstrap,twitter-bootstrap-3,viewport
    Built a site using bootstrap 3, looks great and works great on all devices apart from an iPad 4 landscape. Im currently able to slide to the left on the site and a white margin appears offsite. My container width is 1044px, and content width 1024px (container width - 2x10px...

    Website Mobile Issue - Viewport

    html,css,mobile,viewport
    I have just launched my website http://www.connorgraham.com.au and am having mobile viewing issues. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile, you are able to scroll to the right to show a white bar that covers 20% or so of an...

    How to ignore black bars on fitviewport(LibGdx) when getting coordinates?

    java,libgdx,touch,coordinates,viewport
    I have a problem that can't resolve. I use a stage in my game with FitViewport style. stage = new Stage(new FitViewport(SCREEN_WIDTH, SCREEN_HEIGHT)); But there's a problem when I get the touchdown coordinates and black bars appear on screen (if the screen has the right ratio there's no problem). @Override...

    CSS background-position variation between chrome/firefox

    css,firefox,viewport,background-position,variation
    I am creating a website for a final project and am having an issue with the background-position of my nav's image changing between browsers (mainly Firefox). This can be demonstrated by clicking the link to the page I have uploaded on my college's server: http://cis.scc.losrios.edu/~cisw320q_stu007/sbc/index.html . Alternating the viewport (Chrome/Firefox)...

    Libgdx very bad quality of scaled down stage

    libgdx,viewport,scaling,stage
    I am doing my very first libgdx game, and I have a problem with the scaling quality. I created a new class that implements the Screen interface. I programmed everything on that screen as if it was always to run on a 1080x1920 resolution, and then I used the FitViewport...

    Check if element is between 30% and 60% of the viewport

    javascript,jquery,html,css,viewport
    I am trying to change the color of <li> elements when they are between 30% and 60% of the viewport. So I have this grid of elements stacking side by side like this: I ran into few plugins like Waypoints, Viewport Checker and few others but nothing good. Any idea?...

    Create responsive web page with CSS (need help about page width)

    html,css,responsive-design,viewport
    I am trying to create responsive web-page for four sizes of screen (320px, 640px, 980px and 1024px). So when I play around with site size all seems fine, all responsive, but when I make size larger than 1024px, I want to stop any resizing actions and make page look like...

    css not working on mobile device, cropped layout

    html,css,mobile,viewport
    I have made a webpage which is working on any browser but not on mobile devices. The webpages may seems like very unprofessional but it is for testing. I think maybe the problem seems to be in the viewport settings in css. Can someone help me out? The link is:...

    Both iOS WebView types incorrectly setting 320px viewport size on iPhone 6 and 6+ (Xamarin app)

    ios,uiwebview,xamarin,viewport,wkwebview
    I've been wrestling with this for a few hours now. Here's the repro scenario (Xamarin.iOS 8.10, iOS 8.2): Created a (mostly) empty test web page (no stylesheet, just a width=100% on the body) with the following tag: <meta name="viewport" content="width=device-width, initial-scale=1.0"> Page loaded in both a UIWebView and WKWebView (preferred)...

    CSS Menu Not Working on Mobiles or Tablets

    html,css,angularjs,css3,viewport
    I have created the plunkr found here: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview This menu works as expected on a desktop/laptop.. But it does not look as it does on a desktop. I imagine the CSS is correct, but something wrong with the viewport settings?? HTML: <body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]"> <div class="header...

    Firefox mobile: Links getting activated by touching elsewhere

    firefox,mobile,hyperlink,scale,viewport
    I've got a strange probleme here. If I have this line in the HEAD part <meta name="viewport" content="width=1200,initial-scale=2,minimum-scale=2"> touching the lines which are not links in the following example causes one of the links to get activated: <ul> <li><a href="http://www.example.com">example</a></li> <li><a href="http://www.test.com">test</a></li> <li>Text in between</li> <li>Even more text in between</li>...

    Why does my viewport look different when I deploy to heroku?

    html5,mobile,heroku,responsive-design,viewport
    I have a simple web app that I am deploying to heroku. In my html, I am have the meta information about the viewport: <head> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <title>Notify</title> <link rel="stylesheet" type="text/css" href="./app.css"> <link rel="stylesheet" type="text/css" href="./bootstrap.css"> </head> Here is my server code: var express = require('express');...

    Libgdx: How to calculate sprite size when viewport is in used

    libgdx,viewport
    I have few questions regarding using libgdx viewport. I have initialised a viewport with this virtual screen size (800 x 480). I'm trying to display a sprite with (100 x 100) virtual size. Do I recalculate based on the screen size ratio to supply the size? Or I just apply...

    phantomjs image width not getting as expected

    javascript,phantomjs,screenshot,viewport,browser-width
    when i take screenshots using phanomjs using the following code works fine and I am getting width as 1920px and height is not a problem for me. var webPage = require('webpage'); var page = webPage.create(); page.viewportSize = { width: 1920, height: 1080 }; page.open("http://www.google.com", function start(status) { page.render('google_home.png'); phantom.exit(); but,...

    Why doesn't my site respond to the size of my browser window?

    css,responsive-design,media-queries,viewport,meta
    I have created a page with media queries in my CSS so that it should respond to the viewport of the device. When I use the Firefox web dev tool for responsive design I can see how my site reacts. But when I resize my browser I cannot. http://champlain.torqueweb.com/html/Responsive1.html Should...

    Is it possible to double viewport height in jquery function

    jquery,viewport
    I have a very basic jquery question. Is it possible to do some arithmetic operations on viewport variables? And if so how, I cant seem to get it. <script> var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); if (scroll >= 2*viewportHeight ) { //<-- would like to add a class...

    Is there a way to get the real viewport size in hardware-pixels without viewport meta tag?

    javascript,hardware,device,viewport,pixel
    I want to get the viewport width with javascript. But not the common virtual viewport. I need the logical hardware viewport and in my case it's not an option to set the viewport meta tag. To clearify my issue: I want to get 320 pixels on IPhone 5 (640 hardware...

    I can't fix camera to any object in a 2D Matrix

    c#,matrix,camera,xna,viewport
    Problem description: I am trying to develop some 2D game with terrain collision in C# using XNA framework. I have already completed simple terrain generating and object, for example car, can move on this terrain. But now, I get a problem with camera fix to that car. I tried to...

    Ubuntu - MonoGame static graphics.Viewport size

    ubuntu,graphics,monodevelop,viewport,monogame
    I'm running MonoGame in MonoDevelop under Ubuntu and doing some tutorials, but I'm constantly experiencing a problem with the size of graphics.Viewport Each time I build an app, it doesn't matter if it is windowed or fullscreen. The resolution doesn't matter also. graphics.Viewport.Width graphics.Viewport.Height always return 800x480. Does anyone has...

    How do I obtain a floating element's left offset while it is outside the viewport?

    javascript,jquery,html,css,viewport
    Here's my situation. I've created several panels stacked side by side which are wrapped in a main container. Each panel takes 100% the viewport width and height. My goal is to be able to scroll horizontally to each panel when I click on their respective link. This works fine using...

    initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

    mobile,responsive-design,media-queries,viewport,initial-scale
    So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have...

    Floated Sidebar: How to get sidebar full height of window?

    css,height,equals,viewport,sidebar
    I know that there will be people that may ask for the full code, but I'm just asking in a very general sense. Say, I have the main content floated to the left with no fixed height and the sidebar floated to the right. I want the sidebar to take...

    THREE.js Orthographic camera aspect must match viewport aspect?

    three.js,viewport,orthographic
    Please could someone confirm that the following "supposed constraint" is correct?... In order to render a three.js orthographic camera to a viewport (and to avoid distortion) the camera's frustum left,right,bottom and top planes must define a frontal frustum face (ocWidth, ocHeight) whose aspect ratio (width/height) is the same as the...

    Viewports and pixel sprites - libgdx

    android,libgdx,viewport,pixel
    I'm new with libgdx and I have a big problem. I'm developing a game using pixel sprites and they look nice in my phone but if I test the game in another phone the sprites looks very stretched and bad. I've testing viewports but I don't get it working as...

    Get the number of an element's pixels which are inside the viewport

    javascript,html,dom,position,viewport
    I'm trying to get the total number of a given html element's pixels which are visible inside the viewport. This question and accepted answer Can I detect the user viewable area on the browser? were very useful for determining whether the element is in view/out of view/partially in view, but...

    CSS mobile version of web site is zoomed in A LITTLE BIT when loaded (only whatchable with mobile device)

    css,mobile,zoom,viewport,pinchzoom
    I have set up a mobile web site of http://www.berlin-ra-kanzlei.de/ ... but for an unknown reason it always seems to be zoomed in just A LITTLE BIT (maybe 1 - 3%?). There is always missing some milimetres of the right side and I can zoom out with a pinch. It...

    Page Speed Insights - Size Content to Viewport?

    css,viewport,google-pagespeed
    I am getting the error in Google Page Speed Insights stating: "The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience." "The page content is 378 CSS pixels wide, but the viewport...

    Cross Viewport oclussion culling

    xna,overlay,viewport,xna-4.0,occlusion-culling
    I'm currently working on a XNA project where I need to create a Picture in picture Overlay to displaying a 3D scene from multiple angles. currently I'm trying to use 2 viewports to do this. The main one fills whole screen and is working as desired. The second is placed...

    How can I remove the FancyBox prev/play/next arrows in the navbar at the top of the FancyBox viewport?

    jquery,fancybox,viewport,navbar,fancybox-2
    I have thumbnails. If you click on these thumbnails, fancybox kicks in to show the bigger image. At the top of the viewport is a navbar with arrows that let you click to move left or right in the gallery, or to play the video if the thumbnail was a...