Проблема с использованием jQuery UI Accordion и iFrame - PullRequest
Новая
       14

Проблема с использованием jQuery UI Accordion и iFrame

1 голос
/ 23 июля 2011

Я скорее дизайнер, чем разработчик, поэтому я надеюсь, что кто-нибудь может помочь мне с этой проблемой.Я использую JQuery UI Accordion для отображения контента.Когда все, что у меня есть, это текст и ссылки, он работает нормально.Однако я хочу продемонстрировать видео и хочу, чтобы люди с iPhone и iPad могли его видеть, поэтому я использую iFrame, который Vimeo предоставляет для проверки браузера и операционной системы пользователя и динамической доставки видео в HTML 5 или Flash.

jQuery UI Accordion и iFrame отлично работают в браузерах настольных компьютеров (хотя и немного неуклюже с FF), но когда я тестирую их на своих iPhone и iPad, они не работают.По сути, первый элемент виден и пригоден для использования, но в ту минуту, когда я пытаюсь выбрать другой элемент, кажется, что он скрывает содержимое.Проверьте это здесь .Вы увидите, что он отлично работает в настольном браузере, но не работает на iPhone и iPad.Если у вас нет iPhone или iPad для просмотра, вот изображение

. Как видите, весь контент скрыт.Аккордеон по-прежнему оживляет, когда я нажимаю на 2-й элемент, но ничего из содержимого не видно.

Вот что я использую в своей голове 

<script type='text/javascript' src='Scripts/jquery-1.5.1.min.js'></script>
<script type='text/javascript' src='Scripts/jquery-ui-1.8.14.custom.min.js'></script>
<link rel="stylesheet" href="css/south-street/jquery-ui.css" type="text/css" />

Вот что яиспользуя в своем теле 

<td width="626"><div id="jQueryUIAccordion" >
    <h3><a href="#">The Skin Spa</a></h3>
    <div>


<iframe src="http://player.vimeo.com/video/7691842?title=0&amp;byline=0&amp;portrait=0" width="540" height="304" frameborder="0"></iframe>
        <p class="TM-Font1"><a href="http://www.skinspanewyork.com/" target="_new">The Skin Spa</a>,  skin treatment center, wanted to inform their customers on some of the most popular procedures being performed and what they entailed. Tonangi Design &amp; Media created 5 separate movies that are showcased on their website as well as on flat screen televisions in their spa locations. <strong>View the rest of the videos that we produced for the Skin Spa</strong>: <a href="port_photolight.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=400,left=0,top=0,titlebar=no')">Photolight</a>    | <a href="port_skint.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Skin Tightening</a>| <a href="port_hair.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Hair Removal</a> | <a href="port_micro.html"path/to/pop-page.htm" target="page" onClick="window.open('','page','toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=0,width=640,height=400,left=0,top=0,titlebar=no')">Microdermabrasion</a></p>
<p class="TM-Font1"><strong>&gt; <a href="portfolio_comm.html">Check out our TV &amp; Web commercials</a></strong></p>
    </div>
    <h3><a href="#">Hook Up Your Dorm</a></h3>
    <div>

    <iframe src="http://player.vimeo.com/video/9719129?title=0&amp;byline=0&amp;portrait=0" width="540" height="304" frameborder="0"></iframe>
        <p class="TM-Font1"><a href="http://www.hookupyourdorm.com/" target="_new">Hook Up Your Dorm</a> needed to explain their unique service to their customers. Since the bulk of their users would be high school students about to move into a college dorm, the web video had to be concise yet descriptive. The video is used on their website today.</p>
<p class="TM-Font1"><strong>&gt; <a href="portfolio_comm.html">Check out our TV &amp; Web commercials</a></strong></p>
    </div>

Примечания: Сначала я использовал код прямо из Google, но я подумал, что, возможно, была ошибка, поэтому я пошел и попытался получитьновейшая и самая лучшая. 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
<style type="text/css">
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/south-street/jquery-ui.css");

Любая помощь будет чрезвычайно признательна!

1 Ответ

0 голосов
/ 23 июля 2011

iPhone и iPad используют WebKit в качестве движка рендеринга.

Так что абсолютно не должно быть никакой разницы, когда вы тестируете это на iPhone / iPad или браузере Safari.

Мне не удалось воспроизвести эту проблему.

...