1 Attachment(s)
jQuery mobile screen display issue...
I've posted this on stack overflow and the jquery mobile forum but no solution yet so just asking in here in case anyone has a magic solution.
In a nutshell, I am new to jquery mobile so created something basic from this tutorial and thought I was getting on well until it came to adding a page with the collapsible accordion type blocks. It displayed fine but by default they were open with content visible when I loaded the page. Changing the div data-role so it said
HTML Code:
<div data-role="collapsible" data-collapsed="true">
should have worked but didn't. A lot of googling led me to believe it was down to the script I was using and indeed I then noticed this tutorial was well out of date and was using jquery.com/jquery-1.4.3.min.js and code.jquery.com/mobile/1.0a1 so changed to the current versions which solved the collapsible blocks problem but left me with a tiny footer and content. Everything shrunk, here is a screenshot of how it looks:
Attachment 27355
So with the old scripts, it was the right size but collapsible didn't work and with the new scripts vice versa.
Des anyone have a clue what the issue is? Here is the full code of my page (no fancy extras now as I defaulted back to just get one page sorted first!) The header images are set to 100% width so these are ok, the list menu should fill the whole screen (it does using the older scripts)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>magnetikmedia</title>
<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>
<li><a href="#about">
<div class="mobile_menu_hpage"></div>
<div class="list-text">About Us</div>
</a></li>
<li><a href="#getsocial">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Get Social</div>
</a></li>
<li><a href="#services">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Services</div>
</a></li>
<li><a href="#portfolio">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Portfolio</div>
</a></li>
<li><a href="#contact">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Contact Us</div>
</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer1">
<div id="footer1" align="center"><a href="http://www.facebook.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" alt="magnetikmedia on facebook" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.twitter.com/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" alt="magnetikmedia on twitter" width="30" height="30" style="margin-right:10px;" ></a><a href="http://magnetikmedia.blogspot.co.uk"><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" alt="magnetikmedia on blogger" width="30" height="30" style="margin-right:10px;" ></a><a href="http://www.linkedin.com/in/magnetikmedia"><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" alt="magnetikmedia on linkedin" width="113" height="30" style="margin-right:10px;" ></a>
</div>
</div>
</div>
</div><!-- /footer -->
</div>
</div><!-- /page -->
</body>
</html>
Re: jQuery mobile screen display issue...
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
whats in mobile.css??
Good question. As I wanted to add some custom css I created a new .css file, copied in everything from the jquery 1.3.1. css file and then added my own .css on the end. probably didn't need to copy everything into mobile.css too but wasn't sure how it worked and wanted top be safe. That said I have tested removing the mboile.css reference completely and same issue still.
The extra code in the mobile.css that I added is here
Code:
#footer_left { margin-left: auto;
margin-right: auto;
}
.red {
color: #DF0B24;
font-weight: bold;
}
h1 {
line-height:100%;
padding: 0px;
margin: 0px;
color:#7F7F7D;
}
h2 {
font-size: large;
color: #DF0B24;
padding: 0px;
margin: 0px;
}
#footer1 {
padding-top: 10px;
padding-bottom: 10px;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #ADACB2;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ADACB2;
}
#footer_left {
width: 100%
margin-left: 20px;
margin-bottom: 10px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
Re: jQuery mobile screen display issue...
wheres the css for <div class="mobile_menu_hpage"></div>
<div class="mobile_menu_hpag"></div>
Think you be better getting rid of the <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
and customizing it all in mobile.css, looking at the jquery one there are font sizes etc which might be causing the issue
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
wheres the css for <div class="mobile_menu_hpage"></div>
<div class="mobile_menu_hpag"></div>
Think you be better getting rid of the <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
and customizing it all in mobile.css, looking at the jquery one there are font sizes etc which might be causing the issue
True about the div classes, I have removed those now so that menu now looks like this:
Code:
<div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="b">
<li data-role="list-divider">Digital Design and Development</li>
<li data-icon="home"><a href="#about">data-icon="arrow-r"</a></li>
<li data-icon="delete"><a href="#getsocial">data-icon="arrow-r"</a></li>
<li data-icon="plus"><a href="#services">data-icon="arrow-r"</a></li>
<li data-icon="arrow-u"><a href="#portfolio">data-icon="arrow-r"</a></li>
<li data-icon="arrow-d"><a href="#contact">data-icon="arrow-r"</a></li>
</ul>
I would love to completely remove the jquery script however I don't know exactly which bits I need for all the parts I'm using. This is where it gets confusing. Even changing the colour of an element is very difficult as it's not very clear which exact css class I am looking for in the huge mound of css they provide.
Re: jQuery mobile screen display issue...
It has been replicated on the JQM forum so hopefully someone will find a fix soon:)
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
SoundOfFaz
It has been replicated on the JQM forum so hopefully someone will find a fix soon:)
Zip and send all the code over and I will have a look tomm at work.
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
Zip and send all the code over and I will have a look tomm at work.
Thanks mate, I can't PM you as it says I don't have enough space to send the message so here is a link to the folder all the mobile site sites in http://www.magnetikmedia.co.uk/m.zip
Re: jQuery mobile screen display issue...
I missed the damn viewport code so sorted now! <meta name="viewport" content="initial-scale=1.0, width=device-width">
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
SoundOfFaz
I missed the damn viewport code so sorted now!
<meta name="viewport" content="initial-scale=1.0, width=device-width">
Good boy ;-)
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
Good boy ;-)
I have got one more issue now though. If the offer is still open to have a flick through my code then here's an updated link and it is most appreciated. http://www.magnetikmedia.co.uk/m_update.zip The issue is that the internal links aren't working. I have a multi page document with internal links like <a href="#about">, the first 3 are fine, the other 2 are not. I can only put it down to a missing closing tag somewhere but have looked through all the code and can see nothing. The links in question are in the list on page 2 (plus all the links on page 4 but I assume once one is sorted then the general issue will be resolved)
If you get chance to have a look please do, it's driving me crazy!
Re: jQuery mobile screen display issue...
All fixed mate
Test it at www.kimba.me.uk/m/index.html
Download from www.kimba.me.uk/m.zip
The problem was not closing the content div’s meaning the pages were not getting closed as the content took to the pages </div> as its own.
I don’t know if you bothered finishing the Contact page but were missing the footer etc so have added that as well.
Div’s can be a pain in the arse but if you got a good editor its easy to spot which <div> relates to which </div> I use Notpad++ personally but plenty out there
Akimba ;-)
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
All fixed mate
Test it at
www.kimba.me.uk/m/index.html
Download from
www.kimba.me.uk/m.zip
The problem was not closing the content div’s meaning the pages were not getting closed as the content took to the pages </div> as its own.
I don’t know if you bothered finishing the Contact page but were missing the footer etc so have added that as well.
Div’s can be a pain in the arse but if you got a good editor its easy to spot which <div> relates to which </div> I use Notpad++ personally but plenty out there
Akimba ;-)
Tested and working, thought it would be something like this. Thanks for fixing you legend! I hadn't finished the contact page, it was just a filler really. Can get on with that now :)
Re: jQuery mobile screen display issue...
All in a days work mate ;-)
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
All in a days work mate ;-)
Hi mate, can you take this down from your hosting as your copy of it is showing up in a google search :) Cheers
Re: jQuery mobile screen display issue...
Hey Akimba,
I noticed this is still appearing on google http://www.kimba.me.uk/m/index.html Caould you take it down please?
Re: jQuery mobile screen display issue...
Done, I seen you said before but didnt know what you wanted me to do ;-)
Re: jQuery mobile screen display issue...
Hey Akimba,
for some reason I cant send you any links in a PM but the links I need removing are above in this thread www.kimba.me.uk/m/index.html and www.kimba.me.uk/m.zip
Cheers mate
Re: jQuery mobile screen display issue...
Re: jQuery mobile screen display issue...
Quote:
Originally Posted by
akimba
Done ;-)
Cheers mate, thanks a lot.
