i'm working on a restaurant's website and have run into this annoying problem when visiting the site on my phone. here's what i see: http://i.imgur.com/rc1sS.png (reproducible in iOS5, iOS6, some Androids)
the menus are .JPG's loading in Twitter Bootstrap modals, and the code looks like this:
<div id="menu" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img src="assets/menus/brunch.jpg">
</div>
</div>
<a data-toggle="modal" href="#menu" >BRUNCH</a></p>
everything loads fine in all desktop browsers, and weirdly enough they appear on the mobile Chrome app in iOS6. i've asked a couple of my Android using friends, and it's about 50%. i have no idea why there doesn't seem to be a pattern. is it an issue with how the images are being called? (i don't think it has anything to do with the modal itself?)
help!
ok, turns out the images were CMYK, which mobile does not like. changed to RGB and everything loads fine now!
Related
My Collapse / Navbar is works well in other devices but it is not working in my iPhone or Ipads. I am using botstrap3.
Can any one help me to resolve this problem.
my code is
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="font-size:30px;">
<span class="nb_left pull-left">
<span class="fa fa-reorder"></span>
</span>
</a>
Thanks in advance
Yes, there are some issues discussed which states that these kind of problem arise. I have found that it might be the issue of a missing href="#" inside anchor tag.
For instance this might work:
<a href="#" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="font-size:30px;">
<span class="nb_left pull-left">
<span class="fa fa-reorder"></span></span>
</a>
Source: Github
try media query in css ..it makes the design responsive so that u can easily run on your iphone
I'm adding social buttons for every post link in a web site where some post links are shown at once.
The problem is that sometimes some buttons are not shown and keep waiting for a response. I've tried with some browsers and computers and it's happening sometimes with any of them.
I'm adding the buttons like this:
<div class="social">
<div class="twitter">
Twittear
</div> 
<div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&layout=box_count&action=like&colorscheme=light&locale=es_ES" scrolling="no" frameborder="0" style="height:62px; width:74px" allowtransparency="true"></iframe></div>
<g:plusone size="tall" href="<?php the_permalink() ?>"></g:plusone>
</div>
This is the web page: http://nosabesnada.com/ultimas-noticias/
Any idea of why it is sometimes happening and how to solve it?
I'm using the form navbar-search. I want to have an "advanced search" modal that opens from a link within the navbar.
If I put the modal div within my tag in the navbar, when the modal opens it is behind the darkened area that is normally outside of the modal window. Clicking anywhere closes the modal and the darkened mask.
I can fix this by moving the modal div outside of the navbar (and, thus, outside of my form) but then it breaks my form functionality. The advanced search modal is supposed to function as an extension of the form field directly in the navbar but if I use two different forms to fix the modal problem, the forms don't work together any longer. Does that make sense?
If I enclose the entire nav bar plus my modal (which is outside the navbar) in a tag, it works but screws up some of the navbar formatting so I'm thinking this is not a very clean solution.
So, I either need to a way to fix the modal display issue or a way to make my form situation work properly (as in, linking two forms together without having a ton of duplicate markup for hidden fields and the like).
Thanks for any ideas!
Matt
Here is what I have now (which I've gone ahead and just adjusted css afterward to make things line up). I don't think it is semantically correct according to how bootstrap's navbar is supposed to be used, but my form is working correctly and that is a big deal to me. :)
<form>
<navbar></navbar>
<modal></modal>
</form>
I am a little unsure what you are asking, but this is a stab at what I think you are asking. The modal does not actually need to put the code for the modal in the form itself. The only thing you need in the navbar is the link and trigger activating the modal.
<form>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Advanced Search</li>
</ul>
</div>
</div>
</form>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Advanced Search</h3>
</div>
<div class="modal-body">
<p>Put your search fields here. </p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Search</button>
</div>
</div>
See working link.
http://jsbin.com/ifaqaj/1/edit
I have a single-page scrolling website. It uses a fixed-position nav bar with jquery to scroll to different sections of the website. The site works fine except for on the iOS (I haven't tested it on Android). On iOS, after clicking a link, the navigation freezes until you manually scroll up or down. For some reason the link stays active until you scroll. Is this a bug in Mobile Safari? Is there some workaround?
Here's the basic HTML:
<body>
<ul class="nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<div class = "page" id = "home"> </div>
<!-- About -->
<div class = "page" id="about">
<div class="pagebreak"></div>
</div>
<!-- Portfolio -->
<div class = "page" id="portfolio">
<div class="pagebreak"></div>
</div>
<!-- Contact Me -->
<div class = "page" id="contact">
<div class="pagebreak"></div>
</div>
</body>
Here's the actual site if you would like to see the problem: http://boundincode.com
BTW, I don't think this is a jquery or javascript issue because even if I remove the javascript and the jquery, the problem persists.
I'll add another answer since it's completely separate from my original one.
Since you need a temporary workaround, you might find what you're looking for in iScroll 4. I'd used it to do what you're trying to accomplish in pre-iOS 5 days so it might be worth looking into.
position: fixed support was only added to Mobile Safari in iOS 5, so it's likely that the implementation of it is still buggy, especially if you're seeing the same problem in other sites. Probably worth filing a bug report with Apple.
I don't usually deal in exclamation points, but I have hours before this goes live. I have the following page full of FBML for a Facebook tab on a product page:
<fb:fbml version="1.1">
<div id="container" style="width: 520px;">
<fb:visible-to-connection>
<div>
Yay!
<a href="{link}" style="border: 0; display:inline-block;">
<img src="{image link}" style="border: none;" />
</a>
</div>
<fb:else>
<div>
<img src="{image link}" style="border: none;" />
</div>
</fb:else>
</fb:visible-to-connection>
<div class="{a css class I have to censor}">
<img src="{image link}" />
<p class="nopurchase" style="font-family: 'Trebuchet MS Gothic', Arial; font-size: 10px;">
some text.
Click for something.</p>
</div>
</div>
</fb:fbml>
Basically it's a fan gate. To get past it the user has to like the page it resides on. It parses and renders, but for whatever reason both conditions (the div for fans, and the one for non-fans) are drawn. I have no idea why fb:visible-to-connection isn't doing this.
The answer is simple. If you are an admin of the application you are using, visible-to-connection will show you everything, regardless whether you're a fan or not. Normal users will see the expected functionality.
Yep, if you are an admin you get the trap all the time. If you go to the page with an account that is not an admin you can like the page and then see the content as expected. Thanks
Go to ACCOUNT on the top right of your screen
Click USE FACEBOOK AS PAGE
Select another page, then check your functionality - this should work