Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am using this javascript, which scrolls pages (divs).
The problem I am having is, when resizing the browser window. A white border appears.
Is there anything I can do to fix this issue?
URL to my slightly modified version here.
Thanks.
In your class .wrapper, mask and itens* try using % values. This works for me!
.wrapper {
width: 100%;
height: 100%;
}
So I'm trying to inspect all yours elements and i notice if you change with property to 100% your animation works good! Instead of the "back div" coming from right is coming from bottom
This is a advice -> If u use 'px' unit you will have serious problem just because your web app isn't responsive!
See the transition with 100% width except the frist one and notice the white border appears!
You need to figure out what its better for you
If you really need the "back div" coming from right you need to do a transition and using 'margins' and 'z-index'
By removing all the height and width variables, I was able to keep the script from modifying my css.
Thanks for all your suggestions.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 months ago.
Improve this question
I have this website that displays 'The Game of Life', showing a canvas with the cells. On mobile, you can touch the canvas and it draws some cells, but it also scrolls the screen a little bit, even if the content of the web doesn't occupy more than 80% of the screen.
I've tried using
body {
overflow: hidden;
}
But it didn't work Webpage
Try this:
body {
overscroll-behavior: none;
overflow: hidden;
}
EDITED!!
I finally solved it. In my CSS i put this:
html, body {
touch-action: none;
}
Maybe it doesn't work for everyone, but solved my problem.
Buttons still work properly :)
EDIT:
I needed to activate the touch action in the rest of the website, so i replaced the code above, applying it only to the canvas
canvas {
touch-action: none;
}
This allowed to zoom or scroll in the rest of the web, while not in the actual game
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm experiencing some issues with parallax background images.
I'm working with this template. As you can see, in the home page there are 2 divs exploiting stellar.js (i.e., .fh5co-cover and #fh5co-started ). All seems fine with a computer resolution but if I try to visualize the website with a Phone resolution (e.g., simulating the iPhone7 Plus rendering through Chrome) the background image in .fh5co-cover is not centered. Moreover the background image in #fh5co-started displays grey borders when you scroll the page.
Is there a way for centering background images and for avoiding those annoying grey borders at small resolutions?
Set the background position x to 50%:
background-position-x: 50%;
In here:
#media screen and (max-width: 768px)
.fh5co-cover {
heifght: inherit;
padding: 3em 0;
background-position-x: 50% !important;
}
PD: important! because the position is being changed in js by whatever plugin you are using.
About the gray border, couldn't find it so i guess was just a bug on your browser
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have created a mobile header only for mobile devices. My problem now is, if you click on Menü, the menu shows up but you cannot hide the menu again by clicking on Schliessen. Also the function closeExtendMenuMobile() got set with an onclick event.
Also, if you call the function closeExtendMenuMobile() in the console, the menu colapses again. How is that?
Why is the event not clickable and how can I fix that?
Here ist the website I am talking about: https://classymagazin.de/home/
You have to load the website as a 'mobile device'. Means, below 920px!
div#headerHeadingMobile {
position: relative;
z-index: 999;
}
Does the trick.
The element with the Id of extendMenuMobile is overlapping the link so you cannot tap it.
Maybe try giving extendMenuMobile a position of absolute and a top to push it down so that the link is not covered.
OR
Set #extendMenuMobile and .vc_custom_1509619992888 to position relative and give them appropriate z-index's.
I found this using firefox's "Responsive Design Mode" set to a mobile size and the firefox built in "Inspector" both are under the "Developer" section.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
Okay, so I'm making a mobile theme to my website, which is based on WordPress. I need to scale the images in articles to fit the screen. Okay, I could do that easily with CSS (width: 100%, height: auto) but that's not working right, because then images which are horizontal would be scaled stupidly.
So let's say the images are sized:
576x432
432x576
100x300
Let's say that the screen resolution is 360x640.
Here's how I wan't the images to scale:
360x270 (same dimension, but scaled down!)
360x480 (same dimension, but scaled down!)
100x300 (not scaled, because 100<360)
With the CSS thing everything would just be scaled to 360xSomething, even the small one which doesn't need scaling. And if screen was like 460x780, number 2 would be scaled up even if not needed!
So here's what I've thought of doing:
Go through all images
Check if image width > screen width
If yes, then scale, if not => skip
Profit!
And the problem: I have no idea how :( So any help guys?
You can achieve that using max-height:100%; and max-width:100%;
See this FIDDLE
I used a wapper div the size of your example screen (360x640) around the images and you can see that only the wider/heigher images are scaled.
.image-responsive {
display: block;
height: auto;
max-width: 100%;
}
Apply this class to images.. Should stretch the image on smaller screens :-)
Thank you,
Rahul Patil
You can very easily achieve that.
Instead of width:100%, use max-width:100%.
To scale any image to browser width, simple idea is to use
width:100%;
height:auto
see this DEMO
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 9 years ago.
Improve this question
If you navigate to http://learn.knockoutjs.com/ you get a 'welcome' style screen which is a semi-transparent overlay that introduces users to the screen elements. It's nifty.
It looks a little like the jquery plugin BlockUI, but I think it's something a bit more fancy than that. Fancybox comes close, but seems to only offer a single centre element. Viewing source didn't help me much, I'm not a JS expert by any means.
Does anyone know how this is done or how to do something similar on a page?
Steve used: http://trentrichardson.com/Impromptu/ for the message boxes on the tutorial pages.
You might like this post that describes the open source tools that he used in creating learn.knockoutjs.com: http://blog.stevensanderson.com/2011/07/22/review-open-source-components-used-in-learnknockoutjs/
Have a quick look at the example below:
http://jsfiddle.net/2q7xT/
Explanation:
This is probably not the best implementation but the idea is there. First you will be needing a <div> which you will fill with either a semi-transparent black image:
background: url(semi-transparent-image.png) repeat;
I used the RGBA technique but it's not supported by all browsers.
The second solution is to fill the div with a black color such as:
background-color: #000;
and then use the Cross-browser opacity css attribute to reduce the opacity:
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
The most important part is that this div should have position: fixed; and a z-index lower than the z-index of the element above it.
That's called a lightbox, or, a modal box. There are several cool jQuery lightbox plugins. Here are a few:
FancyBox
ColorBox
LightView
I suggest FancyBox or ColorBox for what you're trying to do. FancyBox is my favorite.
Here are the top 10 jQuery modalbox plugins: Top 10 jQuery Modal Box Plugins
Note: Using only CSS for a dialog (another answer has suggested doing it that way) isn't that good, as you will not be able to make cool fading transitions and you wont be able to make it close with a button or link.
I hope this is helpful.
yeah, it kind of looks like a jquery ui dialog plugin. I've actually been looking into creating something similar and it's my understanding that those ui dialogs are pretty customizable. Here's a basic tutorial I found on youtube http://www.youtube.com/watch?v=b16V25eNyJY. Hope this helps.
Glinkot.
If you look at the web pages source code it gives you a div like this:
<div id="seeThru" style="opacity: .75; height: 100%; width: 100%"></div>
from there you can just overlay anchors or whatever else