Responsive menu doesnot work in mobile layout

Hello there,
I have successfully designed and uploaded my responsive website.Here is my link.
http://trichyengg.ac.in/
I have used responsive dropdown menu in my website.
My menu doesnot work good in mobile layout.Please check and help me.
And also there is some problem in this page
http://trichyengg.ac.in/college.php
Here the accordion works well.But I don't find footer in this page.Please help me to solve this problem.
Thanks in advance.

For the class .footer_style, you need to remove the height:200px (set a min-height:200px if you want the <div> to never shrink past a certain point) and add overflow:hidden so it doesn't collapse with all those floated elements within it.
That should do it.

Similar Messages

Footer doesnot work in mobile and tablet layout

Hello there
Here is my link.
http://trichyengg.ac.in/
My footer doesn't work good in mobile & tablet layout.
Please help me to solve this problem.
(Since I am learning and doing responsive website.Thanks a lot to this forum which helps me lot)
Thanks in advance.

For the class .footer_style, you need to remove the height:200px (set a min-height:200px if you want the <div> to never shrink past a certain point) and add overflow:hidden so it doesn't collapse with all those floated elements within it.
That should do it.

Responsive menu not working on iPad. Please help!

Hi guys,
I've built a fully responsive site and everything works perfectly, as it should.
However, it was brought to my attention that on an iPad, when you go to this page, the main burger-icon menu doesn't work; you click the drop down button and nothing happens.
This has been tested on numerous devices i.e. desktop, mobile, different browsers etc. and I haven't been able to replicate it - just on the iPad this problem exists.
Does anyone know what may be causing the issue and how I might be able to fix it?
Thank you very much for any help and advice.
SM

One of the causes for a group of your errors is that you are using the wrong <!doctype>. Since you are using HTML5 semantic tags, you need to change...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
to the HTML5 version...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

Spry menu not working on mobile browser

How are you with Mobiles, Originally, like a month ago, the main page worked on my Iphone, but the menu has since disapeared. Is there an issue with the spry or CSS.? Can anyone help with this please.   http://www.tompriceshs.wa.edu.au/publish/

sorry Gramps, good to here from you again, the correct is
http://www.tompriceshs.wa.edu.au/Publish/
I checked the original template and it work with
<div class="contentArea">
                <ul class="leftnavigation">
                    <li><a href="#" >This is definitely navigation item 1</a></li>
                    <li><a href="#" >Item 2</a></li>
                    <li><a href="#" >Item 3</a></li>
                </ul>
But I wanted a better menu and also added a div, now is
            </div>
            <div class="contentArea">
                <div id="leftNav" style="float: left; width: 200px; height: auto;">
                <ul class="leftnavigation"><ul id="MenuBar1" class="MenuBarVertical">
            <img src="SpryAssets/MenuBarRound.gif" width="176" height="8" align="absbottom" />
                  <li><a href="\index.htm">Home</a> </li>
                  <li><a href="news/news.html" class="MenuBarItemSubmenu">News</a>
                      <ul>
                        <li><a href="news/news.html">Latest News</a></li>
........................................etc etc to close with
</ul>
Thanks Skip

HTML5 output is not working on mobile devices, including iPads and iPhones

Hello,
I posted a question about this last week but had no reply. So I'm posting it again as it presents a serious problem for anyone wanting to publish content to mobile devices from Captivate 6.
The problem is that HTML5 quiz content runs incrediably slowly (it at all) and crashes the brower on mobile devices. I have tested this on an iPhone and 2 iPads in 2 different locations.
This is a demo that shows the problems: http://sshls-dev.port.ac.uk/captivate_problems/
(Running this demo on a standard laptop / PC will be fine and it will work perfectly. The problem only appears when the content is viewed on a mobile device).
The problem is more extreem in the 'shorthand' demo. The quiz loads up the first question and then when I press submit it either freezes or closes the browser (Safari) completly. Occasionally it will progress to questions 2 or 3 but then the same happens.
I am keen on finding an answer / workaround becuase at the moment it effectively means that Captivate cannot be used to display quizes on phones / iPads.
I would be very grateful if anyone knows how to solve this problem to let me know.
thanks,
Emily

Hi alex,
Try it with any type of android system.
regards
ferry
Op 22 feb. 2013, om 09:56 heeft Alex Pavelescu <[email protected]> het volgende geschreven:
Re: BC menu not working on mobile devices
created by Alex Pavelescu in Content Management and Modules - View the full discussion
Hi Ferry,
Just tested on an iphone 4 and it works fine. Please provide details for all the devices on which you have the issue (model type/name, os version, browser version)
Kind Regards,
Alex.
Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/5093384#5093384
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/5093384#5093384
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/5093384#5093384. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Content Management and Modules by email or at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Responsive menu issue help needed

Need some help trouble shooting an issue I'm having with a responsive menu not working. Use this link to see the website: http://www.sherwoodcompanies.com/home
When I test the menu for the smallest screen width, the menu is converting to the menu button like it's supposed to, but when you click on it, it does nothing. I'm sure this is a super basic thing I keep overlooking, but I can't seem to find the issue. Any thoughts?

No problem. We will figure this out. I am going to have you revert back to the way it was on a couple of things. Since this is foundation, I will study their docs a little and get this the way it is supposed to be. It has to be something simple.
Starting with the scripts.js file. revert back to the following.
Line 88 - $menuBtn = $('#menu-toggle'),
Line 89 - $navUl = $("#window"),
Line 107 - $navUl.toggle();
Foundation.css
On Line 1148 uncomment "overflow:hidden;"
On Line 1244 revertback to display:block instead of display:none;
I also want you to place your script files in the footer in this order. Also leave modernizer at the top in the header.
<script src="/_assets/js/vendor/jquery.js"></script>
<script src="/_assets/js/foundation.min.js"></script>
<script src="/_assets/js/vendor/fastclick.js"></script>
<script src="/_assets/js/scripts.js"></script>
This is the setup that it should be, but we know it still does not work. So I will look at it from another angle.

How do I get a menu widget to work on mobile

I am using a menu widget in DW CS6 and would like it to work on mobile. How do you get it to drop down and stick so you can roll over the menu?
<div id="midnav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#" aria-haspopup="true" class="MenuBarItemSubmenu" id="isbtn-findAjob">FIND A JOB</a>
<ul>
<li><a href="why-work-with-celebrity.aspx">WHY WORK WITH CELEBRITY</a></li>
<li><a href="master-pages/areas-of-specialization-employee.aspx">AREAS OF SPECIALIZATION</a></li>
<li><a href="career-options.aspx">CAREER OPTIONS</a></li>
<li><a href="our-process-employee.aspx">OUR PROCESS</a></li>
<li><a href="benefits.aspx">BENEFITS</a></li>
<li><a href="job-search.aspx">JOB SEARCH</a></li>
<li><a href="outstanding-opportunities.aspx">OUTSTANDING OPPORTUNITIES<br />
E-NEWSLETTER</a></li>
</ul>
</li>
<li><a href="why-partner-with-celebrity.aspx" aria-haspopup="true" id="isbtn-findTalent" >FIND TALENT</a>
<ul>
<li><a href="why-partner-with-celebrity.aspx">WHY PARTNER WITH CELEBRITY</a></li>
<li><a href="areas-of-specialization-client.aspx">AREAS OF SPECIALIZATION</a></li>
<li><a href="staffing-solutions.html">STAFFING SOLUTIONS</a></li>
<li><a href="our-process-client.aspx">OUR PROCESS</a></li>
<li><a href="request-talent.aspx">REQUEST TALENT</a></li>
<li><a href="online-timecard-approval.aspx">ONLINE TIMECARD APPROVAL</a></li>
<li><a href="top-talent-newsletter.aspx">TOP TALENT E-NEWSLETTER</a></li>
</ul>
</li>
<li><a href="starting-your-assignment.aspx" aria-haspopup="true" id="isbtn-forEmployees" >FOR EMPLOYEES</a>
<ul>
<li><a href="starting-your-assignment.aspx">STARTING YOUR ASSIGNMENT</a></li>
<li><a href="pay-benefits.aspx">PAY & BENEFITS</a></li>
<li><a href="online-timecard-submittal.aspx">ONLINE TIMECARD SUBMITTAL</a></li>
<li><a href="employee-handbook.aspx">EMPLOYEE HANDBOOK</a></li>
</ul>
</li>
</ul>
</div>

Touch screen devices don't respond to hover or mouseOver event triggers because they have no mouse. If you want mobile friendly sub-menus, you'll need to find one that responds to onClick events.
PVII's Pop-Menu Magic3 (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
Responsive Hybrid Menu
Dynamic Drive DHTML Scripts- Page Sideview Menu
Responsive Iconic Menu
Dynamic Drive CSS Library- Responsive Iconic Menu
Nancy O.

BC eCart to work with mobile responsive.

How set the BC eCart to work with mobile responsive.
Web Site is already a responsive theme but the eCart comes from BC is not.
I've been setting items in modulestyleesheets.css sizes to 100%, and float left but the cart wants to be very wide.
http://www.firstnightva.org/fnv_store.html

Hopefully these will help you:
http://css-tricks.com/responsive-data-tables/
http://elvery.net/demo/responsive-tables/

Sub menu buttons not working on mobiles

Why are my sub menu buttons not working on mobile phones but working fine on computers?
Sub menu buttons come under these buttons, Our funerals services, Advice and information.
http://www.vanessaroberts.co.uk/

You are using a Spry menubar widget. Spry was created pre-touch-screen systems and hence not designed for touch screens.
There are a number of solutions available to you
1. Don't have an active link on the main menu item
2. Place submenus in the page that is opened by the main menu item, e.g. as a vertical menu
3. Use Spry Menu Bar ver 2.0
3. Use a different menu system that is geared to accommodate touch screens
Because of the demise of Spry, see here http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l, option 3 looks like the best option.
There are a number of free-of-charge jQuery menubars, you could also opt for one of the commercial menubars such as PVII, WebAssist or DMXZone

IE7 locks onto Mobil layout vs desktop layout

I am developing a new site and using the fluid grid layout. I have tested it on my laptop in Firefox v18, Internet Explorer 9, and Chrome v24. Everything was fine until I tested it on an XP desktop. Everything looked fine in Firefox v18 on the desktop, however, Internet Explorer 7 did not show the Content1 and Content2 as side by side columns that all the other browsers showed. In using the IE Developer Tool Bar it shows that the division style for them is width=100%. In reviewing my css the only place where Content 1 and Content 2 has width=100% is in the Mobile Layout for 480px and below. The Tablet and Desktop Layout both have those widths below 50%.
Here is my html:
<!doctype html>




<html class="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conestoga Wagon Web Service - Your Business Ally</title>
<meta name="author" content="Conestoga Wagon Web Service">
<meta name="description" content="Conestoga Wagon Web Service, your business ally; where the mystique of yesteryear meets the technolgy of today and provides small business and organizations access to affordable professional web site design and hosting.">
<meta name="keywords" content="cheap website design,website design,affordable website design,custom website design,small businesses,website solutions,idaho website design,website designers,website hosting,web hosting">
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/fluid.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.4.1.min.js" type="text/javascript">
</script>
    <script src="js/jquery.jcarousel.pack.js" type="text/javascript">
</script>
    <script src="js/jquery-func.js" type="text/javascript"></script>


<script src="js/respond.min.js">
</script>
</head>
<body>
<div class="gridContainer clearfix">
    <div id="Header">
    
    <img src="images/header.png" alt="Conestoga Wagon Web Service Header Image">
    
    </div>
    <div id="Menu">
    
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About Us</a></li>
                        <li><a href="design.html">Design</a></li>
                        <li><a href="hosting.html">Hosting</a></li>
                        <li><a href="contact.html">Contact Us</a></li>
                        <li><a href="faq.html">FAQ</a></li>
                    </ul>
    
    </div>
    
    <div id="Content1">
        <h2>This is a test of H2 on Home page</h2>
This is the content for Layout Division Tag "Content"
<p>Combined with optimal use of human resources, big is no longer impregnable to ensure that non-operating cash outflows are assessed. An important ingredient of business process reengineering the vitality of conceptual synergies is of supreme importance the new golden rule gives enormous power to those individuals and units. Exploitation of core competencies as an essential enabler, through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard.</p>
<p>As knowledge is fragmented into specialities from binary cause and effect to complex patterns, an important ingredient of business process reengineering. Building flexibility through spreading knowledge and self-organization, benchmarking against industry leaders, an essential process, should be a top priority at all times defensive reasoning, the doom loop and doom zoom. Maximization of shareholder wealth through separation of ownership from management the vitality of conceptual synergies is of supreme importance as knowledge is fragmented into specialities. The balanced scorecard, like the executive dashboard, is an essential tool building a dynamic relationship between the main players. An important ingredient of business process reengineering in a collaborative, forward-thinking venture brought together through the merging of like minds.</p>
<p>By moving executive focus from lag financial indicators to more actionable lead indicators, working through a top-down, bottom-up approach, the strategic vision - if indeed there be one - is required to identify. Organizations capable of double-loop learning, that will indubitably lay the firm foundations for any leading company to focus on improvement, not cost. By moving executive focus from lag financial indicators to more actionable lead indicators, benchmarking against industry leaders, an essential process, should be a top priority at all times building flexibility through spreading knowledge and self-organization. To ensure that non-operating cash outflows are assessed.</p>
<p>Measure the process, not the people. As knowledge is fragmented into specialities combined with optimal use of human resources, in order to build a shared view of what can be improved. Exploiting the productive lifecycle the components and priorities for the change program motivating participants and capturing their expectations. Big is no longer impregnable as knowledge is fragmented into specialities.</p>
<p>By moving executive focus from lag financial indicators to more actionable lead indicators, organizations capable of double-loop learning, building a dynamic relationship between the main players. To focus on improvement, not cost, quantitative analysis of all the key ratios has a vital role to play in this exploitation of core competencies as an essential enabler. From binary cause and effect to complex patterns, the new golden rule gives enormous power to those individuals and units, to experience a profound paradigm shift.</p>
    </div>
    <div id="Content2">This is the content for Layout Div Tag "Content2"
      <p>Love's not time's fool, though rosy lips and cheeks oh, no, it is an ever fixed mark or bends with the remover to remove. Love alters not with his brief hours and weeks, it is the star to every wand'ring bark, within his bending sickle's compass come. Admit impediments; love is not love that looks on tempests and is never shaken; oh, no, it is an ever fixed mark. If this be error and upon me proved, whose worth's unknown, although his height be taken. But bears it out even to the edge of doom.</p>
      <p>It is the star to every wand'ring bark, which alters when it alteration finds. Love's not time's fool, though rosy lips and cheeks within his bending sickle's compass come; which alters when it alteration finds. Admit impediments; love is not love if this be error and upon me proved, oh, no, it is an ever fixed mark. Love alters not with his brief hours and weeks, whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; admit impediments; love is not love love's not time's fool, though rosy lips and cheeks.</p>
      <p>Let me not to the marriage of true minds it is the star to every wand'ring bark, within his bending sickle's compass come. Which alters when it alteration finds, oh, no, it is an ever fixed mark love's not time's fool, though rosy lips and cheeks. Admit impediments; love is not love let me not to the marriage of true minds that looks on tempests and is never shaken. Within his bending sickle's compass come; if this be error and upon me proved, I never writ, nor no man ever loved. Love's not time's fool, though rosy lips and cheeks love alters not with his brief hours and weeks, oh, no, it is an ever fixed mark.</p>
      <p>Let me not to the marriage of true minds but bears it out even to the edge of doom. Oh, no, it is an ever fixed mark that looks on tempests and is never shaken; or bends with the remover to remove. Within his bending sickle's compass come; but bears it out even to the edge of doom.</p>
      <p>Admit impediments; love is not love love alters not with his brief hours and weeks, love's not time's fool, though rosy lips and cheeks. It is the star to every wand'ring bark, or bends with the remover to remove. Within his bending sickle's compass come; oh, no, it is an ever fixed mark whose worth's unknown, although his height be taken. Love's not time's fool, though rosy lips and cheeks.</p>
    </div>

    <div id="Footer"> <hr class="divider">
    
<script type="text/javascript">
now=new Date();
year=now.getFullYear();
</script>Copyright © 2012-<script type="text/javascript">
document.write(year);
</script>
<strong> Conestoga Wagon Web Service</strong><br>
| <a class="active" href="index.html">Conestoga Wagon Web Service</a> | <a href="hosting.html">Conestoga Wagon Web Hosting</a> | <a href="proposal.html">Request Proposal</a> | <a href="tos.html">TOS</a> | <a href="privacy.html">Privacy Policy</a> | <a href="hostagreement.html">Web Hosting Agreement</a> | <br>
<strong>An Idaho owned and operated Web Design and Hosting company.</strong>
    
    </div>
</div>
</body>
</html>
Here is my css:
@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/
img, object, embed, video {
    max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
    Dreamweaver Fluid Grid Properties
    dw-num-cols-mobile:        5;
    dw-num-cols-tablet:        8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:    10;
    Inspiration from "Responsive Web Design" by Ethan Marcotte
    http://www.alistapart.com/articles/responsive-web-design
    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
/* Mobile Layout: 480px and below. */
.gridContainer {
    margin-left: auto;
    margin-right: auto;
    width: 98.1818%;
    padding-left: 0.909%;
    padding-right: 0.909%;
#Header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
#Menu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#Menu ul{
    list-style-type: none;
    text-align: center;
    font-weight: bold;
    float: right;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0;
#Menu ul li{
    float: left;
    display: inline;
#Menu ul li a{
    float: left;
    display: inline;
    width: 151px;
    height: 100px;
    background: url(../images/nav.png);
    text-decoration: none;
    line-height: 67px;
    color: #ffb400;
#Menu ul li a.active,
#Menu ul li a:hover{ color:#fff; background: url(../images/nav-active.png) }
#Content1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: justify;
#Footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    color: #ffb400;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 10px;
#Footer a {color: #ffb400; }
#Content2 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    text-align: justify;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
.gridContainer {
    width: 98.8636%;
    padding-left: 0.5681%;
    padding-right: 0.5681%;
#Header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
#Menu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#Content1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.4252%;
    display: block;
#Footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#Content2 {
    clear: none;
    float: left;
    margin-left: 1.1494%;
    width: 49.4252%;
    display: block;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
    width: 99.2424%;
    max-width: 1232px;
    padding-left: 0.3787%;
    padding-right: 0.3787%;
    margin: auto;
#Header {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
#Menu {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#Content1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 49.6183%;
    display: block;
#Footer {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
#Content2 {
    clear: none;
    float: left;
    margin-left: 2%;
    width: 48%;
    display: block;
It just seems like IE7 is locking onto the very first section of the css and not moving to the desktop and I just haven't been able to solve this so any assistance would be greatly appreciated.
Thanks,
Verne

I have been doing a lot of looking around for possible solutions to this IE 7 issue with media queries. While there were a lot of diverse views on the subject I came across an article that seemed to be an easier solution to try than everything else. I downloaded the js file they recommended, copied and pasted


into my document and now IE 7 shows the web page just like FF, IE9, and Chrome does. It was a super easy fix, even for a novice.
I hope this helps someone else like it has helped me.
Thanks,
Verne
Message was edited by: in-idaho

Bootstrap2/3 Menu not working now?

This is a flavour of my previous thread, out a different issue, so I have started another question...
If this is a bad idea please tell me and i'll not do it again
I had this menu working fine in a bootstrap version 2 of my website but trying to transfer it over to a bootstrap 3 version.
Link to the stripped file version is at www.tdrd.karoo.net/bootstrapmenuproblem.zip
Now in the latest version - when the screen is sized to mobile, the menu should work as a pull down menu.
NOW I DO NOT UNDERSTAND how these things work, and no idea what all these pull and after things do in the css styles and script, but something is not working.
The menu itself has suddenly started to block out all the options, and the options have stepped out to the right by about 10 pixels.
I'd love to understand how these things work so I can correct itself and would appreciate if someone has the patience both to tell me how, and what is wrong now...
Thank you in advance to anyone looking at this.
Terry

You can add a mobile menu bar icon if you want one.
I've added a link to font awesome css in your code below and changed a couple of things. You can use any icon on the font awesome website now you are linked to the css file.
Icons are added using this code convention <i class="fa fa-bars"></i> which I've included in you mobile trigger anchor tag:
<a href="#" id="pull" style="padding: 10px;"><i class="fa fa-bars"></i></a>
If you go to the website there are dozens to choose from.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script>
$(function() {
$('#pull').click(function() {
$('nav ul').slideToggle();
$(window).on('resize', function(){
var win = $(this); //this = window
if (win.width() > 769) { $('nav ul').show(); }
if (win.width() < 768) { $('nav ul').hide(); }
</script>
<style>
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
img, object, embed, video {
max-width: 100%;
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
Dreamweaver Fluid Grid Properties
dw-num-cols-mobile:        5;
dw-num-cols-tablet:        8;
dw-num-cols-desktop:    12;
dw-gutter-percentage:    10;
/* GLOBAL STYLES */
/* GLOBAL STYLES */
/* GLOBAL STYLES */
body {
background-image: none;
.img-float-left{
float:left;
margin-right:2px;
/* Mobile Layout: 480px and below. */
/* Mobile Layout: 480px and below. */
/* Mobile Layout: 480px and below. */
body {
background-image: none;
.img-float-left{
float:left;
margin-right:2px;
p {
font-size: 100%;
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 98.1818%;
padding-left: 0.909%;
padding-right: 0.909%;
background:rgba(255,255,255,0.6);
#adaptiveMessage {
position: relative;
clear: both;
margin: 0;
width: 100%;
display: block;
background-color: #99C7E2;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
#header {
position: relative;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
background-size: 100% 100%;
background-image: url(../_img/tfwebsiteslogo.png);
background-color: #FFF;
#header:before {
content:"";
display:block;
padding-top:18%;
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
#menubar {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#article {
clear: both;
margin-left: 0;
width: 100%;
display: block;
#article h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
color: #06C;
line-height: 112%;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin-top: 5;
margin-right: 0;
margin-bottom: 10;
padding-top: 5px;
border-top-width: medium;
border-top-style: solid;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
padding-bottom: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
nav {
margin-left: 0;
display: block;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
border-bottom: 2px solid #283744;
border-bottom: 0;
nav ul {
display: none;
margin: 0;
padding: 0;
nav li {
display: block;
width:100%;
float: left;
color: #FFF;
background: #455868;
nav a {
color: #fff;
display: block;
text-align: center;
text-decoration: none;
line-height: 40px;
nav li a {
color: #FFF;
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
display: block;
nav a:hover, nav a:active, nav a:visited {
color: #FFF;
background-color: #8c99a4;
#pull {
font-size: 25px;
text-align: right;
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
p {
font-size: 100%;
}.gridContainer {
width: 98.8636%;
max-width: 768px;
padding-left: 0.5681%;
padding-right: 0.5681%;
#header {
position: relative;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header:before {
content:"";
display:block;
padding-top:18%;
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
#article {
clear: both;
margin-left: 0;
width: 100%;
display: block;
#article h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
color: #06C;
line-height: 125%;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
nav li {
display: block;
width: 50%;
float: left;
color: #FFF;
background: #455868;
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
body {
background-attachment: fixed;
background-image: url(../_img/background.gif);
background-repeat: no-repeat;
p {
font-size: 100%;
}.gridContainer {
width: 99.2424%;
max-width: 960px;
padding-left: 0.3787%;
padding-right: 0.3787%;
margin: auto;
#header {
position: relative;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
#header:before {
display: block;
padding-top: 18%;
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
#article {
clear: both;
margin-left: 0;
width: 100%;
display: block;
#article h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
color: #06C;
line-height: 155%;
margin-top: 4px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
nav {
height: 40px;
width: 100%;
background: #455868;
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
border-bottom: 2px solid #283744;
nav ul {
padding: 0;
margin: 0 0;
width: 100%;
height: 40px;
color: #FFF;
display:block;
nav li {
width:140px;
float: left;
color: #FFF;
background: #455868;
position:relative;
nav a {
color: #fff;
width:100%;
text-align: center;
text-decoration: none;
line-height: 40px;
position:relative;
nav li a {
color: #FFF;
border-right: 1px solid #576979;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
nav li:last-child a {
border-right: 0;
nav a:hover, nav a:active, nav a:visited {
color: #FFF;
background-color: #8c99a4;
nav a#pull {
display: none;
#designer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="adaptiveMessage">This site is Responsive. Layout will change according to your device.</div>
<nav>
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="portfolio.htm">Portfolio</a></li>
<li><a href="effects.htm">Effects</a></li>
<li><a href="contact/index.htm">Contact</a></li>
</ul>
<a href="#" id="pull" style="padding: 10px;"><i class="fa fa-bars"></i></a>
</nav>
</div>
<div class="col-md-12">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
</div>
</div>
</div>
</body>
</html>

MenuManager in TableViewer does not work on mobile device (tablet with Win 8)

Hi
Welcome everybody This is my first post on this forum. I really hope you can help me out with this. It is kind of strange.... Ok, so I am developing RCP/SWT application, and it has to work on mobile device with windows 8 as well (10' tablet with windows Cool. So far so good - everything work pretty nice, except one thing that is really annoying. So I have this table, and user has possibility to use right click menu (context menu) on each row. Problem is that it does not work at all on mobile device. Right click on tablet is actually defined by pressing finger for longer period of time - then after 1 or 2 second menu should appear. Problem is that it does not at all. Funny thing is that when I connect a mouse using USB port to tablet I am able to open this menu Smile - it works completely fine. Menu works also with finger action when I press on empty (e.g. table without any data) I noticed that this issue is related with constructor style option SWT.FULL_FULL_SELECTION that is used for creating table. When I remove it from the constructor, right click works fine but there is not any data (no record is selected), so I can not perform any context menu action. Menu is dynamic, so depending on what data is loaded, the contain of menu changes. Main problem is that method menuAboutToShow is not called at all!. The code looks like that:
Table table = new Table(parent, SWT.FULL_SELECTION | SWT.VIRTUAL | SWT.H_SCROLL | SWT.V_SCROLL | SWT.MULTI);
table.setLinesVisible(true);
table.setLayout(myTableLayout);
createColumns(table, layout);
table.setHeaderVisible(true);
tableViewer = new TableViewer(table);
tableViewer.setContentProvider(myContentProvider);
tableViewer.setLabelProvider(myLabelProvider);
MenuManager contextMenu = new MenuManager();
contextMenu.setRemoveAllWhenShown(true);
contextMenu.addMenuListener(new IMenuListener() {
public void menuAboutToShow(IMenuManager mgr) {
contextMenu.add(new MyAction(action)); // THIS PLACE IS NEVER CALLED WITH RIGHT FINGER CLICK!
// dynamic filling context menu engine
Menu menu = contextMenu.createContextMenu(tableViewer.getControl());
tableViewer.getControl().setMenu(menu);
getSite().registerContextMenu(contextMenu, null);
Additional info: this tap-hold functionally is standard equivalent for right click on tablet device with Windows. I did not do any additional implementation for that. I think it should just work. I have several tables in my application and in all of those this problem appears. Any idea what may be wrong ?
cheers,
Pawel

I have just installed SWT Example on my tablet (from here: https://www.eclipse.org/swt/examples.php#standaloneOutsideEclipse) and this same problem appears on the table example. I think it is general problem/bug. Should I report this as a swt eclipse bug ?

MenuManager in TableViewer does not work on mobile device

Hi
Welcome everybody This is my first post on this forum. I really hope you can help me out with this. It is kind of strange.... Ok, so I am developing RCP application, and it has to work on mobile device with windows 8 as well (10' tablet with windows . So far so good - everything work pretty nice, except one thing that is really annoying. So I have this table, and user has possibility to use right click menu (context menu) on each row. Problem is that it does not work at all on mobile device. Right click on tablet is actually defined by pressing finger for longer period of time - then after 1 or 2 second menu should appear. Problem is that it does not at all. Funny thing is that when I connect a mouse using USB port to tablet I am able to open this menu - it works completely fine. Menu works also with finger action when I press on empty (e.g. table without any data) I noticed that this issue is related with constructor style option SWT.FULL_FULL_SELECTION that is used for creating table. When I remove it from the constructor, right click works fine but there is not any data (no record is selected), so I can not perform any context menu action. Menu is dynamic, so depending on what data is loaded, the contain of menu changes. Main problem is that method menuAboutToShow is not called at all!. The code looks like that:
Table table = new Table(parent, SWT.FULL_SELECTION | SWT.VIRTUAL | SWT.H_SCROLL | SWT.V_SCROLL | SWT.MULTI);
table.setLinesVisible(true);
table.setLayout(myTableLayout);
createColumns(table, layout);
table.setHeaderVisible(true);
tableViewer = new TableViewer(table);
tableViewer.setContentProvider(myContentProvider);
tableViewer.setLabelProvider(myLabelProvider);
MenuManager contextMenu = new MenuManager();
contextMenu.setRemoveAllWhenShown(true);
contextMenu.addMenuListener(new IMenuListener() {
public void menuAboutToShow(IMenuManager mgr) {
contextMenu.add(new MyAction(action)); // THIS PLACE IS NEVER CALLED WITH RIGHT FINGER CLICK!
// dynamic filling context menu engine
Menu menu = contextMenu.createContextMenu(tableViewer.getControl());
tableViewer.getControl().setMenu(menu);
getSite().registerContextMenu(contextMenu, null);
Any idea what may be wrong ?
cheers,
Pawel

Hi
The "tap-and-hold" is not my functionality. It default SWT Table behaviour on tablet. In windows it self it works like that - to use "right click" you have to do "tap-and-hold". It is just the way it works on tablet I do not have any other application to test it, but I have several tables/tableViever in my application for presenting different results/data, and in all of those this problem appears

Spry drop down menu not working after page created from template

Hi all.
I created a template and the drop down Spry menu is working fine on local testing on my browser as follows:
I then created a New Page from this above Template. I did no alteration to this new page and just saved it as index.html but when previewing it in the browser, the Spry drop down menu is not working and the page displays as follows:
Here is my site map:
Any help to show where I am going wrong would be much appreciated.
Thanks.

Dear Nancy
Very grateful for your reply.
On Design View and Preview in browsers the index.dwt page spry works fine.
When I create a child page from this template page, the child page looks fine in design view but does the spry fails to preview in browsers (the spry just shows as words and not drop down menus).
Here is the code:


!/cooltext454549176.png|height=170|width=631|src=/cooltext454549176.png!
!/logosmall.jpg|height=58|hspace=0|width=150|src=/logosmall.jpg|vspace=0!
Disclaimer:
Studentshub is a platform for listing services as advertised/promoted by the Companies and individuals concerned. Studentshub does not endorse any of the contents on this site. Studentshub accepts no responsibility for any arrangements, purchase, contracts, agreements, refunds, failure to deliver services etc between individuals, landlords, clubs, organisations, companies etc. This does not affect your statutory rights (2009)
*Contact !/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!
Sitemap !/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!*
© www.studentshub.co.uk *
!/bluebutton.gif|height=10|alt=Blue button|width=10|src=/bluebutton.gif!
!/cooltext454549388.png|height=138|width=700|src=/cooltext454549388.png!
[LIVE | #]
[CAMPUS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOUSE SHARE | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[RENT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[BUY | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WORK | #]
[EMPLOYMENT AGENCIES | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[PART TIME | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[VOLUNTEERING | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WORK ABROAD | #]
[TRAVEL | #]
[BUS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[TRAIN | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[COACH | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[FLIGHTS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[CYCLE | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[FUN | #]
[NIGHTS OUT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[DAYS OUT | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[GROUP OUTINGS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOLIDAYS | #]
[UK | #]
[ABROAD | #]
[SHOPPING | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[BOOKS | #]
[BOOKSHOPS | #]
[USED BOOKS | #]
[HEALTH | #]
[NHS DIRECT | #]
[HOSPITALS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[WALK IN CLINICS | #]
[DERBYSHIRE | #]
[NOTTINGHASHIRE | #]
[LEICESTERSHIRE | #]
[GUM CLINICS | #]
[DERBYSHIRE | #]
[NOTTINGHAMSHIRE | #]
[LEICESTERSHIRE | #]
[HOME | #]

</script>
</body>
</html

Embedded video HTML won't work for mobile

Hi,
I have a video successfully embessed on my desktop site but I can't get it to work for mobile:
You can see it here on the desktop: MTV ART HOUSE MOSCOW
I put the same code in for the mobile version, all I did was change the width and height, can someone please help me fix this?
<video controls="controls" preload="auto" width="1010" height="581" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>
For mobile I changed it to:
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="assets/trailer.mp4" type="video/mp4">
</video>

Hello,
Please try to enter the code below in phone layout. (I have marked the change in bold)
<video controls="controls" preload="auto" width="290" height="171" autoplay="autoplay">
<source src="../assets/trailer.mp4" type="video/mp4">
</video>
Muse create phone layout content in a new folder named as "Phone" as there is no asset folder there we need to correct the directory path in phone layout. I have corrected that in your code.
Regards
Vivek

Responsive menu doesnot work in mobile layout

Similar Messages

Maybe you are looking for