Close

Results 1 to 20 of 20
  1. #1
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default 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:
    new_script.png

    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>
    Last edited by SoundOfFaz; 14th April 2013 at 09:41 PM. Reason: extra info

  2. #2
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    whats in mobile.css??

  3. #3
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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;
    }

  4. #4
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default 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

  5. #5
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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.

  6. #6
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    It has been replicated on the JQM forum so hopefully someone will find a fix soon

  7. #7
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by SoundOfFaz View Post
    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.

  8. #8
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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

  9. #9
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default 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">

  10. #10
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by SoundOfFaz View Post
    I missed the damn viewport code so sorted now!
    <meta name="viewport" content="initial-scale=1.0, width=device-width">
    Good boy ;-)

  11. #11
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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!

  12. #12
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default 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 ;-)

  13. #13
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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

  14. #14
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    All in a days work mate ;-)

  15. #15
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    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

  16. #16
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default 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?

  17. #17
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    Done, I seen you said before but didnt know what you wanted me to do ;-)

  18. #18
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default 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

  19. #19
    DF VIP Member akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,846
    Thanks
    1,034
    Thanked:        783
    Karma Level
    368

    Default Re: jQuery mobile screen display issue...

    Done ;-)

  20. #20
    DF VIP Member SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    328

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    Done ;-)
    Cheers mate, thanks a lot.

Similar Threads

  1. mobile phone scanning ???
    By dodgy1 in forum Home Audio/Video, Electronic Toys & Gadgets
    Replies: 5
    Last Post: 2nd September 2002, 10:02 PM
  2. WTD: mobile phone
    By Danger Mouse in forum Buy, Sell and Trade
    Replies: 3
    Last Post: 2nd September 2002, 02:21 PM
  3. How do I record a phone conversation on my mobile
    By Dopey Dan in forum Unlocking Questions & Solutions
    Replies: 2
    Last Post: 2nd September 2002, 01:38 PM
  4. Mobile phone scam kills curious cats
    By marcode in forum Unlocking Questions & Solutions
    Replies: 2
    Last Post: 31st August 2002, 07:12 PM
  5. Make money with your mobile phone
    By colinjohn1 in forum The Dog and Duck
    Replies: 12
    Last Post: 30th August 2002, 04:49 PM

Social Networking Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •