Hi I have a cordova app and I need to build a chat.
http://jsfiddle.net/jGLvk/1355/
I put the divs with position absolute to when the keyboard on the phone appears all the content move to up too.
So, when I did that the content doesn't show the scroll. How Can I resolve this?
<div class="page-content messages-content" style="position:absolute; width:100%; bottom:48px; top:auto;">
<div class="messages" style="position:absolute; width:100%; bottom:10px; top:auto; overflow-y:auto;">
Pay attention on this lines, where all the new messages will
be inserted.
Thanks.
I was able to solve it with overriding inline styles. Not sure if you should use it (I'm actually sure that you shouldn't)
.messages-auto-layout {
position: static !important;
}
I'm not sure if this is helpful because those styles are most probably applied via JS so there must be a way how to solve it in a more smarter way. Maybe stripping off all JS styles and use only css? I have never build an App using Cordova so I might be missing some context here.
Here is the link --> http://jsfiddle.net/9rsgdrw5/1/
Related
Umm...hi!
I'm new here and am a self-taught amateur (read:google-searching-experiment-dude).
I created a fairly basic webpage but when I scroll down, the content overlaps the header. I don't really know how to explain this,so I'll link everything:
https://youtu.be/R05oISKKaXE
Oh, another thing:I'm sure I have a lot of redundant stuff.
Thanks.
Hello and welcome to stackoverflow!
When posting questions related to html/css/javascript you can use a tool like jsfiddle to create a demo of the problem and post it here, so it is easier for others to help you!
You could try removing the relative position in your .body class and the fixed position on your .header class, that alone might solve your problem.
You have to change the z-index of your elements to make them display on top of each other in a defined order.
Considering a piece of HTML that looks like this,
<div id="header"></div>
<div id="content"></div>
You can set the z-index of each element like so:
#header {
position:fixed;
z-index:1;
}
#content {
position:relative;
z-index:2;
}
I can't figure out how to make a div move when another div is clicked.
Here is a jsfiddle demo: https://jsfiddle.net/vufosn18/ (make sure you make it fullscreen so the image doesn't overlap with the text)
I have been googling around for a bit and can't find anything, so I tried:
#feas:focus #construct{
margin-top: 300px;
position: absolute;
}
When I click on feasibility it gives construction management a margin-top of 300px.
Any help is appreciated, if your answer could be in JavaScript/CSS that would be great.
It would be hard to fix all your issues in one answer. But I'll try to get you going:
Everything is absolute, I think this is not recommended for your case. Read more
You are using ID's everywhere, causing lots of duplicate styles. Try changing this to classes. This will be much easier to manage small changes.
I recommend checking that you are working html strict, this may prevent having rare situations in different browsers. (FYI)
To answer your question:
There are a lot of plugins out there that are easy to use. I suggest you to use one of them instead:
https://jqueryui.com/accordion/
A step by step example (just googled it)
..
For what you want to show in each tab you can have independent html/css. By default is img and p relative. So they won't overlap then.
here is a simple animation
Click on hello and the div with the word world will move down
function click(){
document.getElementById('bottom').style.top="50px"
}
document.getElementById('top').addEventListener('click',click,false)
#top{
width: 50px;
height:50px;
border:solid;
}
#bottom{
position:relative;
top:0px;
width: 50px;
height:50px;
border:solid;
transition-property:top;
transition-duration:3s;
}
<div id="top">
hello
</div>
<div id="bottom">
world
</div>
.line
{
position:absolute;
z-index:2
top: 50px;
}
.otherclass
{
position:absolute;
z-index:1;
}
<div class="line">---</div>
<div class="otherclass"> my content </div>
Why top attribute not work? Is any alternative to z-index? (my pdf generator library probably does not support z-index tag)
EDIT:
I'm trying to generate PDF from HTML:
https://dpaste.de/2uZH
top from 70 line not work. How can I fix it?
There were older ways of doing this on the old Netscape but they are mostly gone now. I think z-index is it. Don't know what you are working on but I would keep in mind that html is not a page formatting language like pdf is. That is why we have both. html was designed to hint at what the browser should do. So can you turn the z-index blocks into divs and have them flow above, below or to the side of the other content?
is there any way I could pull only a portion of an external website using iframe?
This is the page I am trying to pull..
http://clep.collegeboard.org/search/test-centers
The div I wanted to get specifically is the white box in the center (#mainContentWrapper).
I already have a solution myself although it has some flaws. The trick I made was I made an outer div and disabled the iframe and I tweaked the height/width and the positioning where it would only show that portion ...
#outeriframe
{
width:960px;
height:1415px;
overflow:hidden;
position:relative;
}
#inneriframe
{
position:absolute;
top:-300px;
left:-160px;
width:1280px;
height:1415px;
}
The problem is, if the iframe is too big, the footer would show up, if it's too short, the results would be cut off and you can't see them all...
Is there any way I could get around this? Maybe Hide the footer? or grab only the Div I need? Please help me...
Thanks!
You can't, the same origin policy forbids you to interact with a Web page located in a different domain.
Some techniques like CORS or postMessage allow you to work around this limitation, but require some level of control on the other domain.
I've added this twitter widged to one of the site's i manage and for some reason, in every browser but firefox it looks good but in firefox this happens
bam it jump to the side for no reason i solved this by putting overflow:hidden; to the class textwidget
but then everything is gone in the rest of the browsers?
could anyone help me find a solution for this.
All help is very much appreciated
p.s. the site can be found here
Popdrommen
After successfully defeating your popup window, I have come to a conclusion that something like this should help you:
.textwidget {
clear: both;
}
Best thing to do in my opinion, is create a div, set its size, and then apply the overflow:hidden attribute to it, (remember to position it relativly)
Then inside that div put the twitter stuff.
<div style="width:200px; height:500px; position:relative; overflow:hidden">
<!-- Twitter stuff here //-->
</div>