aaron_m12345 aaron_m12345 - 5 months ago 18
CSS Question

Jquery Dropdown Menu for Mobile Losing CSS Attributes

Possibly quite a simple fix here

I am working with Jquery for some dropdown text for a site that I'm working on (I'm fairly amateur with coding in general)

The function seems to work on mobile devices, yet I lose all the css attributes to the text so all the design goes to default. However it's working completely fine on web browser

Can anyone see where I'm going wrong?

Here's what I'm working with:

<a href="javascript:void(0)" id="paragraphAnchor" class="text">
<img src="images/definition-02.png" style="top:-20px; left:6%;
position:absolute; width:40%; max-width:194px;"></a>

<a href="javascript:void(0);" id="paragraphAnchor">

<p id="info">
Lorem Ipsum
</p>
</a>


CSS

#info {

font-family: Helvetica;
font-weight:normal;
font-size:13px;
max-width:460px;
width:80%;
left:6%;
top:40px;
padding:6px;
letter-spacing:0em;
color:#666;
background-color:white;
box-shadow: 1px 1px 2px 1px #CCCCCC;
border-radius:4px;
border:0px solid #333;
position:absolute;
z-index:2000px;
}

#info a {

font-family: Helvetica;
font-size:13px;
color:#333;
text-decoration:none;

}


Any pointers would be amazing, thanks!

Answer

Try the code below

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

Mobile Related jQuery Plugins are below.

  1. http://jquerymobile.com/
  2. http://jqtjs.com/
  3. http://phonegap.com/
Comments