Hi all I am using breakpoints for the first time and I had them working fine, but now my site adapts to the mobile layout but not the screen-size for mobile! I can't see any unclosed tags or css erros, any clue what could be causing this?
http://bennyfit.co.uk/
best,
Try putting your css through a validator. This usually shows up errors that are hard to spot normally:
http://jigsaw.w3.org/css-validator/
Related
I'm working in an EJS template and I need to determine the screen size. I'm using Grunt & Browserfy to compile (apologies if this is the wrong terminology). Using window.screen.width or window.matchMedia returns an error that window is not defined. What would be the best way to access this information?
Answering my own question: I understand now that EJS is rendered on the server so there is no screen to reference. I ended up using Javascript to accomplish what I needed since it's rendered in the browser. It's messier than I wanted but works nonetheless.
Try just using screen.width without the "window" in front.
I´m setting the title of a popup window on ie9, but it´s not getting updated.
Strange thing is that inspecting the elements, the title is correctly setted, but the browser displays the url regardless.
Also, if I open the window like this:
window.open(url,"_blank") then it works
However:
window.open(url,"_blank",'height=200, width=400') (i.e with any specs setted) triggers that strange behaviour
Anyone has any clues on it? any workaround appreciated.
It only happens if the site is marked as trusted, and this solves it:
Trusted Site in IE - html title is ignored
I've been working on a website and from time to time some elements are disappearing from the document. I've figured out that it's because in CSS document the early lines are not fully commented. I would like to ask why if even such a tiny thing like Skeleton's default version text is not fully commented or some of the classes or id's don't have a closing bracket then the whole website has layout problems. What skeleton's version has to do with page's body color ? This is really confusing.
Here is the HTML and CSS :
http://codepen.io/anon/pen/vIchA
I would be glad with any help. Yours truly,
D.
Browsers have to guess how to render bad code. Sometimes they will guess and render it correctly, other times it will look weird.
Different browsers are likely to render it differently (though error handling standards are improving)
In this case, your demo lacks a "/" at the start, which means it is trying to render the comments as css. The comments are not css, so it gets confused and does the best it can.
A quick way to find any bugs in the css is to use this:
http://jigsaw.w3.org/css-validator/
I'm developing an app that loads a form from another website into an iFrame. The iFrame is set to 100% width and height while displayed. That website has JQTouch.
When I touch an input field in iOS 7 on the iPhone, the keyboard pops up and covers the input fields. It doesn't scroll, resize, or even let me scroll down to see the input field. If I type and then close the keyboard, nothing happens.
I've tried everything I've come across. Adding/removing height=device-height in the meta viewport tag didn't do anything. The thing that came closest to a solution was adding the preference "KeyboardShrinksView = true" in config.xml. That made it scroll (but not enough), and permanently pushes the site up about 20px or so.
I've been working on this for the last couple days with no solution in sight. Is this a bug? Is it the way JQTouch is interacting with PhoneGap Build?
UPDATE: Still no fix, but to test I took the form's page out of the iframe and set it using window.location.href="www.mywebsite.com"; They keyboard works in that situation. This is not a valid solution for me (yet), but may provide info on why it's not working.
UPDATE 2: I'm restructuring the app to use window.location.href, rather than an iframe or html object. This creates some small issues, but these are better than the keyboard not working. If anyone has an answer, I'd still like to see it.
Major Edit: I just realized the InAppBrowser plugin does NOT fix the keyboard bug alone. I did some more research, and this topic helped. I had to add "height=device-height" to every meta viewport tag. "width=device-width" should fix any problems viewing the site in mobile Safari. The final result is this:
<meta name="viewport" content="initial-scale=1, minimum-scale=1,
maximum-scale=1, user-scalable=0, height=device-height, width=device-width"/>
One of these also had a semicolon thrown in there, so be sure to check and double-check for syntax errors, as they may cause the problem.
If this doesn't work, there is another solution that you might try in place of or in addition to the meta viewport fix. It's several comments down in that topic I linked and involves some changes to the CSS. Changes to this didn't fix anything in my code, but it helped at least one person, so it's worth checking out if you still need a solution.
I tested this fix with iframe and object, and it didn't work--InAppBrowser is still necessary.
/Major Edit.
Here are some workarounds that worked for me:
Use the InAppBrowser plugin. This allows the app to interact with loadstart/loadstop/loaderror events in the loaded page within the InAppBrowser. This is the solution I suggest. However, with iOS 7, you will need to hide the status bar manually, the solution for which is here
OR Load the page using window.location.href = [website url]. If you don't need to worry about interacting with or returning to the app or linking to external sites (both of which I needed), this is the way to go. It's pretty simple, but lacks some of the functionality of the first solution.
OR Get rid of JQTouch. I wasn't able to do this, but much of it is redundant when you're building an app with PhoneGap.
im working on a CMS it is almost finished
but im struggling serious unfamiliar problems in WYSIWYG editor.
i was first using ckeditor but after experiencing problems with it i switched to tinymce.
some problems are solved but this time someother problems showed up.
problems occuring especially on tables.
1-Anchor element underline removal not working
2-Duplicating Phone numbers
--->might be due to skype phone number converting toolbar
3-too many s how to clean those why even those are there?
4-how to convert
<p>text</p>
back into just
text
because tinymce converting some texts into p element *automatically if it's not the client doing it unknowingly.
*=even though i did that force_paragraph:false setting.
5-As client reports : sometimes cursor turns into loading cursor and wysiwyg editor causes browser to stuck.not even allowing to click links outside of the editor.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
here is that problematic page created with tiny_mce and causing lots of errors in process of editing:
Here some answers
2-Duplicating Phone numbers --->might be due to skype phone number converting toolbar
Might be - this cannot ba a tinymce related problem.
3-too many & nbsp;s how to clean those why even those are there?
Browsers will show several spaces (character code 32) as a single one. Thus & nbsp;s are inserted alternating instead of natural spaces.
4-how to convert
text
back into just text
Tinymce is a rte editor and will generate html code. In order to be able to style editor content, the content need to be wrapped inside a block element - eighter ps or divs. You may use server side code to remove tags.
6-as i experience sometimes it really does stuck and not allow you to edit anything at all.
Please describe a bit more in detail - there needs to be a reason for this.