Close

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

    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 [Only registered and activated users can see links. ] 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:
    [Only registered and activated users can see links. ]

    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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    Default Re: jQuery mobile screen display issue...

    whats in mobile.css??

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

    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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    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 [Only registered and activated users can see links. ]

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

    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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    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. [Only registered and activated users can see links. ] 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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    Default Re: jQuery mobile screen display issue...

    All fixed mate
    Test it at [Only registered and activated users can see links. ]
    Download from [Only registered and activated users can see links. ]
    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    Default Re: jQuery mobile screen display issue...

    Quote Originally Posted by akimba View Post
    All fixed mate
    Test it at [Only registered and activated users can see links. ]
    Download from [Only registered and activated users can see links. ]
    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 Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    Default Re: jQuery mobile screen display issue...

    All in a days work mate ;-)

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

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    Default Re: jQuery mobile screen display issue...

    Hey Akimba,

    I noticed this is still appearing on google [Only registered and activated users can see links. ] Caould you take it down please?

  17. #17
    DF Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    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 Jedi SoundOfFaz's Avatar
    Join Date
    Dec 2003
    Location
    SoundOfFaz HQ
    Posts
    1,274
    Thanks
    18
    Thanked:        3
    Karma Level
    260

    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 [Only registered and activated users can see links. ] and [Only registered and activated users can see links. ]

    Cheers mate

  19. #19
    DF Jedi akimba's Avatar
    Join Date
    Jun 2006
    Location
    UK
    Posts
    2,768
    Thanks
    982
    Thanked:        741
    Karma Level
    290

    Default Re: jQuery mobile screen display issue...

    Done ;-)

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

    Default Re: jQuery mobile screen display issue...

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

Similar Threads

  1. [HELP] Asus X501a display issue
    By Mobileman in forum PC Problems
    Replies: 2
    Last Post: 24th June 2014, 11:21 PM
  2. display and restart issue's
    By scoobie_wrc in forum PC Hardware
    Replies: 14
    Last Post: 14th June 2010, 02:07 PM
  3. Replies: 0
    Last Post: 16th February 2010, 04:10 PM
  4. On-Screen Display (OSD) with VB.Net?
    By Goldberg in forum Programming
    Replies: 5
    Last Post: 4th April 2008, 05:58 PM
  5. strange issue with monitor display and icons changing any ideas?
    By gandalf72 in forum Microsoft Windows XP & Vista
    Replies: 5
    Last Post: 14th November 2005, 02:16 AM

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
  •