I have these APNGs on my art portfolio website. They look fine on desktop Safari, but occasionally flicker (changes in color and parts of the APNG disappear) in safari on iOS.
https://artadriana.com/alison
Another person also viewed it on mobile, and they experience the same problem.
I'm not sure if the problem is in my code, or in my images.
<h1>SAMPLE STICKERS</h1>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/27.png">
<img src="/assets/images/17.png">
<img src="/assets/images/25.png">
</div>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/6.png">
<img src="/assets/images/12.png">
<img src="/assets/images/14.png">
</div>
<div class="three-column-grid" id="alison2-side-by-side">
<img src="/assets/images/29.png">
<img src="/assets/images/36.png">
<img src="/assets/images/33.png">
</div>
Related
I'm attempting to use a basic Bootstrap carousel in my Rails app and I've copied it over as is:
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
This is currently on a partial page, but I have also tried using the carousel in different HTML pages but to no effect. I also tried using the line of javascript offered on the Bootstrap site:
$('.carousel').carousel()
...but this also made no difference. I was expecting to get something resembling an empty Bootstrap Carousel, but what I get in my page is three failed image icons with 'first slide', 'second slide' and 'third slide' next to them. It looks as though Bootstrap is not working at all, but I have already used it in this app for a Navbar and a Jumbotron, which were both successful.
This may be something quite simple, but I'm unable to find out what the problem is, so I would really appreciate some help :-)
I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.
I'm developing a web site, and I'm using SemanticUI.
I prepared this example to explain the problem:
<header>
<div class="ui vertical large menu red item page fluid grid">
<div class="mobile only row">
<div class="ui icon dropdown fluid center align massive button">
<i class="content icon"></i>
Menú
<div class="ui vertical menu">
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</div>
</div>
<div class="ui six menu red item fluid grid">
<div class="tablet only row">
<img src="http://goo.gl/ToQcwM" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
<div class="computer only row">
<img src="http://goo.gl/ljDWQ7" width="20px"/>
<a class="item" href="#"> Home </a> <!-- ¡¡Repeted link!! -->
</div>
</div>
</header>
The trouble (SEO problem) is that I have to duplicate the three links above and of course, I don't want to do it. Actually, the site is build with PHP and I don't really doubled code (it's an include in PHP).
I prepared also a fiddle. To test it, you have to redimension the window in order to see the effects.
Of course, this is not the real situation. You can see the real web if you want.
So, anyone with a solution? best practices about this?
PD: Sorry for my english! :)
Finally, I just maintain one div with all links not repeated and then with CSS style that menu for mobiles.
I have encountered a weird issue with jQuery Mobile, where when tapping on a link in an iFrame and scrolling makes the persistent header in the parent HTML document move up and down with the scrolling. The interesting part is that this behaviour only happens when jQuery mobile has loaded a page in the iFrame. The full example can be seen here: http://www.cs.au.dk/~gedefar/jqm/parent.html (remember to load it on iPhone).
To the code and sorry for the lengthy example, but in order to show the problem I need three pages, parent.html, that contains the iframe, and two child pages, child_{1,2}.html that are loaded in the iFrame (with links to each other):
<div data-role="page">
<div id="header" class="header" data-role="header"
data-position="fixed" data-theme="c">
Foo Bar header
</div>
<div data-role="content">
<iframe src="child_1.html" />
</div>
</div>
child_1.html:
<div data-role="page">
<div data-role="content">
<h1> Child page 1</h1>
Go to child 2
<p>
Normal text, where the header is perfectly positioned when touching
here.
</p>
<p>
No problems below, when this page loaded directly in the iFrame. But loading
child 2 using JQM we get the scolling issues.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
child_2.html (no real difference to child_1.html, except the description):
<div data-role="page">
<div data-role="content">
<h1> Child page 2</h1>
Go to child 1
<p>
Normal text, where the header is perfectly positioned when touching
here and moving up and down after the first touch.
</p>
<p>
The problem is with list items below containing a link. For those the
header is not fixed. For the other it is fixed.
</p>
<ul data-role="listview">
<li>No link.</li>
<li>A link</li>
<li>No link</li>
<li>A link</li>
</ul>
</div>
</div>
What I find really weird is that the header is only moving when scrolling, if the first tap of the scroll is on a link on the child page. So any ideas here how to proceed? Or
Updated
I have tested the above scenario on different versions of iOS and it works perfectly in 7.0.3, but anything older than 7.0.0 the above problem is present. I don't have access to an Android phone, so I haven't been able to test it there.
I want to use jqzoom gallery application instead of magiczoom.
I have two problems:
Jqzoom shows the same title at all zooms. I want to show thumbnail titles at top of zoomed big image. How can I do this?
At magiczoom application, there is a small magnifying glass image and "zoom" text at top of mid size (to be zoomed) image. How I can realize it at jqzoom?
If you have several elements to zoom with several thumbnails you have to name the "rel" atribute to each group so it can display properly your images:
<a href="images/bora/bora1_lrg.jpg" class="jqzoom" rel='gal1' title="BORA">
<img src="images/bora/bora1_md.jpg" title="BORA" style="border: 5px solid #666;">
</a>
<br/>
<img src='images/bora/bora1_th.jpg'>
<img src='images/bora/bora2_th.jpg'>
<img src='images/bora/bora3_th.jpg'>
<img src='images/bora/bora4_th.jpg'>
</div>
<div class="example_column2" align="center">
<a href="images/bora/bora5_lrg.jpg" class="jqzoom" rel='gal2' title="BORA">
<img src="images/bora/bora5_md.jpg" title="BORA" style="border: 5px solid #666;">
</a>
<br/>
<img src='images/bora/bora5_th.jpg'>
<img src='images/bora/bora6_th.jpg'>
<img src='images/bora/bora7_th.jpg'>
<img src='images/bora/bora7_th.jpg'>
</div>