using YUI3 tabview in zend framework - zend-framework

i try to use the YUI3 tabview widget in zend framework.
i use the Yahoo CDN to load all the modules, every things is fine, i got the combo with tabview.css inside except that i can't download the image file that is used in the tabview.css.the same code works fine in a plain html file and the image is right there. why this is happening?
here is a test page http://www.ceshi.anpingsiwang.info, the tabview.css is in the css combo, the full url of tabeview.css is http://yui.yahooapis.com/3.3.0/build/tabview/assets/skins/sam/tabview.css. you can see there is a image called sprite.png is used in that tabview.css file, but it was not loaded. the other plain html file http://www.ceshi.anpingsiwang.info/plain.html is totally fine

The <body> element is missing the class attribute. Just change
<body>
to
<body class="yui3-skin-sam">
and you're golden (and I'm off to sleep).
Edit demo demo demo!

Related

Jquery-mobile messes up css background images on the iphone browser and UIWebView

When I add the jquery-mobile javascript to my site some of the background css images fail to load until I go to a different page and come back to the home page.
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
The second I delete the import line, the images load fine. What might be the issue?
This issue only appears on the ios safari browser and a UIWebView. Works fine in a PC browser.
Seems like it was a jquery-mobile bug. Switching to the latest beta version did the trick for me:
<script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>

ZendFramework images not loading

I have a site I am developing in the ZendFramework and I have two social image pictures on the homepage. When I first load the page the images aren't there, however if I then click a link the images appear if I then click another link further into the site they disappear again, the images are in a div in the layout file they should be there all the time everything else in the layout file is apart from these.. I have been struggling on an issue of trying to echo image paths from a database in the src property of the tag and couldn't get it to work then I realized this was happening and I am assuming it has something to do with the social images problem as the page where I want the database images to appear doesn't have the social links either..
Sorry for the rant I just don't really know how to explain the problem, hope it comes across ok, if you need any more information on this matter don't hesitate to ask!
Thanks in advance!
Rik
When you echo the path to the image for the src attribute of the image tag, you should be using the baseUrl helper so the path is always absolute and references your base URL.
For example, you would call <?php echo $this->baseUrl('images/test.png') ?> and that will result in something like /zendapp/public/images or /images.
I suspect what is happening is the image tag looks something like this: <img src="images/thepic.png" />. You should make sure all images, CSS, Javascript references etc all use absolute paths like /images and avoid ../images, ./images, or images and the like.
Hope that helps.
If don't wont use native view helper function $this->baseUrl(). Just add slash before image url <img src="/images/thepic.png" alt="Some description" width="" heigth="" />

jQuery Mobile sprites not displaying when css included as a local resource in a UIWebView on iPhone

On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.

Using HTML pages in UIWebView, strange issues with relative page images but links work

So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.

Why isn't CSS being applied within my UIWebView?

When I try to display a local HTML page un a UIWebView, the CSS for that page is not being applied. However, when I load that same page in the regular Safari, it is. What could be causing this?
I assume you are using loadHTMLString to populate the content of the UIWebView? Is your CSS embedded in the HTML that you are loading into the view? If it references a file online, check that the URL file is the full path (not just the relative path).
If the CSS is referenced using a relative path it will work fine in the browser, but not in a UIWebView with statically loaded content.