I have a mobile web application (.NET MVC) and I'm using JQuery Mobile (beta 3 & jQuery 1.6.3). My question is regarding the attribute 'data-icon' on various elements. For example, I have an element:
Home
When I run the application locally, everything appears as expected. There is a small circular button with the 'home' image inside. When I deploy my application to my host (Arvixe), this same button renders as expected in Chrome, but does not render as expected on my mobile phone (Nexus One). On my phone, the home icon image does not appear at all.
JQuery mobile is referencing the image sprites in the following manner:
background-image:url(images/icons-18-white.png);
I can verify this image does in fact exist in the proper location, as it appears on the desktop browser, I can get to it with a URL (Desktop and Mobile) and my host log shows that requests to that URL are coming back with a 200 response. I have even connected my web application, while hosted to a weinre server, and I can verify the DOM element does have the correct image path. What's even stranger, is that when I go to jquerymobile.com on my phone, the same icons appear, the problem seems isolated to my hosted site.
Is there something I'm overlooking? Thanks.
I think I may have solved this. When upgrading from jQuery mobile beta 2 to 3, I did not upgrade the corresponding images as well. Grabbing the updated images seems to have done the trick.
Plese place your images folder (which will come from jquery-mobile downloaded zip file) along with your css files.
Ex: If you have copied the .css files to some location named
d:\project\styles\jquery.mobile-1.x.x.css
Then please place the images folder as show below
d:\projects\styles\images
you need to set data-role="button" on anchors for them to appear as buttons with jQM (jQuery Mobile).
see here
Home
this is the only thing I can think of.
The latest jquerymobile has fixed this issue. If not, you need to check the following steps.
check images folder of jquerymobile and jquerymobile CSS are in the same directory
If you put jquerymobile CSS in separate folder, you need to change "path" in this stylesheet
Related
My css only works when I open it with live-server. I didn't realized it until I tried opening the file
of my projects. The JS functionality is there, but my project is just stale, just black and white. I'm using sass and live-sass compiler. And also using a map api leaftlet and open weather api. SO please help,
cannot seems to figure out why my css is not present when I open my project on file or in another browser.
I have seen through your file and I think your issue is your image hasn't been loaded.
You have an image of the starry sky, right? You can only see the black and white page with some icons after the search because your image hasn't been loaded.
As you access the page by opening the file, the image URL in your CSS file is the path relatives to the current CSS file, which means the URL should be ../image/night.jpg.
If you access the page through the live server, that URL is the path relative to your host.
Hope that I understand your problem correctly. I am still learning too :)
I am creating a website with ASP.NET MVC and I am a beginner to this. I have found a theme from bootstrap that I want to use as my design for the website. Before I copied the bootstrap css file into my css in the website, there was the original menu including Home, About, Contact, Register, Log In etc.
But when I add the css file from bootstrap the menu disappears and only the name of the page is left showing. I have copied the file into both 'Content' Bootstrap.css AND bootstrap.min.css, but is there something I am missing here?
https://bootswatch.com/journal/
Debug your code in browser using inspect element sidebar (Ctrl + shift + I shortcut for google chrome).
go to console tab and refresh the page to check if your added file paths are being loaded successfully or not.
I have index.html and guide.html, I link to the guide.html in the index page. however when i go to the guide one through the link the page won't have the design until I refresh. What am I doint wrong? Each page has its own css.
Here's an image right after I click:
And here's another one right after I refresh:
Could be cached css/html. If it looks right after pressing ctrl+F5 on the page in question, it is working correctly.
Web browsers cache CSS files. I see you're using Chrome for Windows - CTRL + F5 will fully refresh the page, CSS and all.
If this problem appears on a live site for some reason, you could re-name your CSS file to avoid the browser using a cached version. For instance custom.css would become custom-2.css.
I have a question.
I am currently building a "blog" website. Not that it matters but..
I am trying to set my background to be a specific image that i have.
And it used to work! Until recently and I just don't know why it wont.
It works when i am on my computer, everything works fine.
But i am using 000Webhost as the hoster for the website.
So if u go to "http://pontuslundhblogg.uphero.com/"
You might see that the website is completely white. Cause the picture wont load for the background.
In my css sheet, i am using:
body {
background-image: url("bakgrund.jpg");
And yes, i did name the picture bakgrund.jpg and uploaded it to 000webhost. Its the exact same name etc. I wondering.. Could two different css stylesheets make so it gets weird or something? Cause I added a second css style sheet to be able to have a drop-down menu in a different sheet, and i added the drop-menu. Around that time it started messing with me..
Is it me doing something wrong.
Or is it 000Webhost?
(Might add that none of my pictures is working now, i can also contribute with more code if needed!)
If you go to pontuslundhblogg.uphero.com/bakgrund.jpg you get a message
"The image pontuslundhblogg.uphero.com/bakgrund.jpg cannot be
displayed because it contains errors".
If you go to pontuslundhblogg.uphero.com/bakgrund1.jpg you get 404 page, which means that the first path (bakgrund.jpg) is correct - but the image itself isn't good.
Try to upload it again or contact the hosting service.
If you use FTP maybe you need to change something in your FTP program settings - maybe change from ASCII to Binary transfer.
http://www.inmotionhosting.com/support/website/file-management/corrupt-file-ftp-transfer
I installed Infragistics 2012 and added a WebDropdown to my web page. When I hover over the webdropdown the dropdown gets a little bigger and the arrow image disappears. This is for Internet Explorer.
When I try on Firefox the dropdown size stays same but the arrow disappears and I can not click on it. Any ideas?
PS: I have a virtual directory under IIS which points to the ig_res styles folder.
Make sure that you have the image that is being used for the hover image in your images folder within the style library. The image should be named igdd_DropDownButtonHover.png and should be in ig_res/[styleset]/images.
If the image is indeed missing, you will need to copy it from the style libraries that Infragistics provides. If the image is present you should use the network tools of the browser or fiddler to see what the response is from the server when that image is requested.