I'am working on mobile version of an existing site and i can't resolve the issue with links in the menu.
The problem occurs only on stock android browser. On Chrome, firefox, safari and even IE the site works fine. All other links on the site are working fine. Here is the link to the site if you would like to test it --> www.antiqpalace.com.
code description:
original site had a "main menu" and "left menu" and i moved some elements from "left menu" to "main menu". Then I redesigned the main menu to specification and hide it with display:none. If you click on menu button JS changes display to block.
What I have tried:
changing parent div position to absolute. that did not work, there were major scrolling issues.
adding JQ .click events to a elements. the result was un-changed. everything still works on chrome... but links remain unclickable in stock android browser.
i add css --> a{background-color:blue} to see what happends on phone and links are positiond fine, just un-clickable.
I have googled that there was/is issue with links and -webkit-transform but i don't have that line in my CSS.
HTML:
<div> ---> whit a fix position and display none
<ul class="menu" style="height: 644px;">
<li class="first leaf menu-mlid-808">
<a href="/about-antiq-palace-hotel-ljubljana.html" >Antiq Palace Hotel
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
<li class="expanded active-trail active menu-mlid-817">
<a href="javascript:show_sub_menu(2)" class="active-trail active">Rooms & Suites
</a>
<ul class="menu" style="height: auto; top: 70.84px;">
<li class="first leaf menu-mlid-823">
<a href="/double-bedroom-residential-suite-one-or-two.html" >Double Bedroom Residential Suite for One or Two
</a>
<img class="DD_right_arrow" src="[some src]">
</li>
.....
</ul>
<div onclick="show_sub_menu(2)" class="A_DD_submenu">
<img class="DD_right_arrow" src="[some src]">
</div>
</li>
.....
</ul>
CSS:
ul{
margin:0 1.5%;
padding:0;
border:none;
width:97%;
height:91%;/* js adds inline height of ful win height -51 px example(height:644px;)*/
display:block;
float:left;
overflow-y:scroll;
}
ul li,
ul li.first {
padding:0;
margin:0;
height:auto;
width:100%;
background:none;
background-color:rgba(196,154,69,1);
display:block;
float:left;
border-bottom:dotted 1px rgb(214,184,124);
position:relative;
z-index:10000;
}
ul li a{
width:70%;
display:block;
font-size:11.5px;
font-weight:bold;
padding: 23px 7%;
text-decoration:none !important;
float:left;
text-align: left;
color: white !important;
text-transform: uppercase;
font-family: 'Open Sans', sans-serif !important;
letter-spacing:2px;
line-height: 16px;
z-index: 10000000000;
position: relative;
}
ul li ul{
width: 100%;
margin: 0;
overflow-y: hidden;
display:none;
}
ul li ul li{
background-color:rgb(126,118,104) !important;
z-index:1000;
margin-bottom: 0 !important;
}
I don't know if it's ok to respond to my own question but I have solved the issue and don't know where to post the solution.
Actual error:
Actual error was an issue with position fixed and links inside that . Andriod browser displays links but are un-clickable. Visuali everything looks ok just does not work.
Fix:
I changed the position of the element to static and added com css to rewrite old css.
Design issue:
This is not a optimal fix because the menu is inserted in the page and not on top of it. I'm not sure which browsers have issues with fixed positioning so I added code to CSS file. If you have a similar problem you can indentify the browser and add code only to that browser
Here is link to css an at the bottom I added the code that fixed this problem.
http://www.antiqpalace.com/sites/www.antiqpalace.com/themes/antiqpalace/css/antiq_mobile.css
Related
I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:
<ul class="main-nav">
<li>HOME</li>
<li>CONTACT</li>
<li class="dropdown">
ACCOUNT <b class="caret"></b>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.
At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.
The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.
$(document).ready(function(){
$("[data-toggle='dropdown']").click(function(e) {
$(this).parents(".dropdown").toggleClass("open"); /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
e.stopPropagation();
});
$("html").click(function() {
$(".open").removeClass("open"); /*when you click out of the dropdown-menu it remove the class "open"*/
});
});
.main-nav{
background: deepskyblue;
padding: 0;
}
.main-nav li{
list-style: none;
display: inline-block;
position: relative; /*with respect to this element dropdown-menu is positioned*/
}
.dropdown-menu{
display: none; /*hide the menu*/
/*this style are just to position the menu*/
position:absolute;
top: 100%;
left: 0;
}
.open .dropdown-menu{
display: block; /*show the menu when its parent has class "open"*/
}
a.nav-item{
display: inline-block;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu{
background: skyblue;
padding: 10px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a class="nav-item" href="index.html">HOME</a></li>
<li><a class="nav-item" href="contact.html">CONTACT</a></li>
<li class="dropdown">
<a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.
I'm trying to get a navigation div to sit in the middle between an image and the right page but also in a way that if the browser is resized, will still maintain the relation. I'm quite positive I know how to do it with a relative positioning but I would like to have the navigation fixed.
[img] nav |right side of viewport
#wrapperNav {
position: fixed;
top: 45%;
right: 50%;
z-index:999;
}
Code: http://jsfiddle.net/LLtnZ/3/
Flexbox has support in most newer desktop and mobile browsers and really dispenses with a lot of the hackiness involved in trying to maintain alignment and positioning with varying screen sizes; it flexes.
For the carousel you describe I would start with the below HTML, based on what you provided in your fiddle:
<div id="wrapper">
<nav class="nav nav--ready">
<div class='nav__center'>
<div class="nav__link nav__link--active">
<a class="nav__link-bullet" href="#one">1</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#two">2</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#three">3</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#four">4</a>
</div>
<div class="nav__link">
<a class="nav__link-bullet" href="#five">5</a>
</div>
</div>
</nav>
<div class='carousel'>
<img src="" alt=""/>
</div>
</div>
#wrapper is a flexbox, .nav is too, so is .nav__center. #wrapper is set to flex-direction: row-reverse; so as to display navigation on the right, if we added another element to #wrapper it would display to the right of .nav. .nav itself is set to flex-direction: row;, though it only has one child: .nav__center, its flexbox styles of justify-content: space-around; and align-items: center; keep the nav buttons aligned at its center no matter what. Within .nav, .nav__center is set to flex-direction: column; so its contents display top to bottom, and these styles align-self: stretch; justify-content: space-around; distribute each .nav__link element evenly from top to bottom.
Here is a fiddle. Notice that navigation stays glued to the right side of the carousel. I set a minimum width on .nav so that it won't disappear even when the display is really tiny.
Here is a quick guide you can probably get through in ten minutes with a cup of coffee.
You need to add position: relative; to your container which in this case is the nav html element.
http://jsfiddle.net/LLtnZ/4/
This might help. So if your image is is 90% width and centered, that will leave 10% left of pagespace, 5% on either side of the image.
If I understand your drawing correctly, the that would mean you'd want the container your nav is in to be
width: 5%
position:fixed;
top: 50%;
right:0;
margin-top -150px; // half the height
height: 300px;
text-align:center;
The 5% width will take up the entire space to the right, but using text-align:center will get items in the middle, as per your "equal" annotation on your drawing.
If you need a jsFiddle let me know
Here's a fiddle: http://jsfiddle.net/47Q9p/
I am using bootstrap to design my site.
Base on this fiddle
I made the nav-static-top to fixed on top. Now the nav-collapse has to many contents and i can't browse to the last menu because the nav-static-top is fixed on top. Is there a way that the
nav-static-top is fixed on top and the nav-collapse content is scrollable so i can scroll to choose on the content?
i've than something like this but i doesn't look good
and i think android devices don't support overflow:scroll
Found a better way. Tested on iphone 4 only.
#media (max-width: 767px) {
.body-container {
padding-top: 50px;
margin-left:10px;
margin-right:10px;
}
.navbar-static-top{
position:fixed;
width:100%;
z-index:1000;
}
.navbar-responsive-collapse{
max-height: 350px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}
This doesn't completely fix your problem, but it definitely looks better if you do this:
<div class="nav-collapse collapse navbar-responsive-collapse" style="overflow-y: scroll;max-height:400px">
<ul class="nav">
instead of
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav" style="overflow: scroll;max-height:400px">
I don't know about doing it on Android, but if it really doesn't work this way, you'll probably have write some JS or something.
I have used wow slider in my web page. It is working fine. But I am facing one problem.
The css is
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:960px;
margin:0 auto;
z-index:100;
border:none;
text-align:left; /* reset align=center */
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
HTML is:
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="images/amazing_sunset.jpg" alt="amazing sunset" title="amazing sunset amazing sunset amazing sunset amazing sunset" /></li>
<li><img src="images/apple_tree.jpg" alt="apple tree" title="apple tree"/></li>
<li><img src="images/beutiful_landscape.jpg" alt="beutiful landscape" title="beautiful landscape"/></li>
<li><img src="images/lightbox-btn-prev.gif" alt="nature" title="nature" width="63" height="32"/></li>
</ul>
</div>
<!-- Generated by WOWSlider.com v2.2 -->
</div>
If the client wants to upload a small size the image is not re-sized. But he upload a large size the image is resized. Totally he is not want to set the width and height. Please refer the last li. The image size is 63*62. But it is automatically re-sized to 500px. Please help me.
Within the WowSlider application (paid version), you have the option to set the height and width of the slider (either preset or custom). It appears that you have selected a width of 960px.
You also have the option to preserver an image's aspect ratio and/or stretch small images. Click on the wrench icon, click on Images, and you'll see the option on the right.
One note -- your client has an incredibly small image if it is only 63px by 62px. If you stretch that up to 960px wide, it is going to be incredibly distorted and pixelated. In this instance, I would request a higher quality image from the client.
I have several block a elements that I want to be side-by-side to create a menu. The width of each is set to auto to accommodate the text inside. Each a element is displayed as a table cell and can work with either absolute or relative positioning.
Thanks for any help.
Mike
If you float block elements, they'll be placed in a horizontal row (with dynamic widths unless you specify a fixed one.)
ul#navigation li {
float: left;
}
Have a look at the HTML for the navigation on this page, for example (Questions, Tags, Users, ...)
display:inline-block
This is an almost similar scenario which you can consider using for creating a menu.
I would have gone with display:inline-block for generic side-by-side display but you're trying to do a horizontal nav. I wouldn't use the table cell display as it's quirky and you'll end up having to clean up other bugs.
Html:
#navigation{
width:550px;
margin:0;
padding:0;
list-style-type:none;
overflow:hidden;
}
#navigation li{
float:left;
}
#navigation li a,#navigation li a:hover{
display:block;
padding:4px 21px 4px 20px;
text-decoration:none;
}
<ul id="navigation">
<li >Some link</li>
<li >Some link 2</li>
<li >Some link three</li>
</ul>