Menu Layout works in all browsers EXCEPT iPhone - iphone

I have a menu very similar to the menu here on StackOverflow. The problem is that my menu looks right in every browser I've tested it on EXCEPT for my iPhone.
Here is a screenshot of the iPhone
Now obviously the "Add Event" button is supposed to be the same size as the rest.
Here's my Markup
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><%: Html.NavigationLink("Now", "Index", "Events")%></li>
<li><%: Html.NavigationLink("Coming", "Coming", "Events")%></li>
<li><%: Html.NavigationLink("Hot", "Hot", "Events")%></li>
<li><%: Html.NavigationLink("Tags", "Index", "Tags")%></li>
<li><%: Html.NavigationLink("Users", "Index", "Users")%></li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li><%: Html.NavigationLink("Add Event", "AddEvent", "Events")%></li>
</ul>
</div>
</div>
And here's my CSS
#menucontainer{position:relative; width:675px; float:right;}
ul.menu
{
padding: 0 0 2px;
position: relative;
margin: 0;
}
ul.menu li
{
display: inline;
list-style: none;
}
ul.menu li a
{
padding: 8px 18px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #666;
color: #fff;
border: 1px solid black;
text-shadow:#000 0px 1px 1px;
}
ul.menu li a.youarehere
{
background-color:#brand_color;
color: #fff;
}
ul.menu li a:hover
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li a:active
{
background-color:#brand_color;
text-decoration: none;
}
ul.menu li.selected a
{
background-color:#brand_color;
color: #000;
}
.floatright
{
float: right;
}
.floatleft
{
float: left;
}
Unfortunately I can't figure this one out. Thanks in advance for any direction.
EDIT:
This is the final output being sent to the browser
<div id="menucontainer">
<div class="floatleft">
<ul class="menu">
<li><a class="youarehere" href="/">Now</a></li>
<li>Coming</li>
<li>Hot</li>
<li>Tags</li>
<li>Users</li>
</ul>
</div>
<div class="floatright">
<ul class="menu">
<li>Add Event</li>
</ul>
</div>
</div>
EDIT:
Reproduction on jsbin
http://jsbin.com/akadi3/2 (note: obviously you need the iOS browser to see the problem)

Ok, so after a LOT of fiddling around, it appears as though if I add a height attribute to the menucontainer, then I'm all good.
#menucontainer
{
position:relative;
width:675px;
height:40px; /* this fixed the problem */
float:right;
font-size:80%;
}

Related

creating multiple div elements in <b-card>

I would like to add 3 div elements in a top section of a card where currently there is an image. I would like to add an image, logo and text message in place of that image. What can I do???
Thanks in Advance,
Here's my code
1)HTML
<div class="card">
<b-card no-body
style="width: 20rem;"
img-src="https://placekitten.com/380/200"
>
<b-list-group class="group">
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
2)CSS
.group {
text-align: center;
}
.header{
text-align: center;
}
.card {
margin: 25px 120px 25px 240px;
border: none;
}
My Actual output looks like as shown
/Users/anvayjoshi/Desktop
My expected output is the top part of the card as shown
/Users/anvayjoshi/Desktop
Please help me !!!!!
Instead of using the img-src attribute on b-card, you can just add a new b-list-group-item.
Here's a jsfiddle demonstrating that, and an image of the result.
new Vue({
el: "#app",
data: {
}
});
.image {
float: left;
}
.logo {
float: left;
margin-right: 10px;
margin-left: 10px;
margin-top: 20px;
}
.text {
float: left;
width: 100px;
}
.group {
text-align: center;
}
.header {
text-align: center;
}
.card {
margin: 10px;
border: none;
}
<div id="app">
<div class="card">
<b-card no-body style="width: 20rem;">
<b-list-group class="group">
<b-list-group-item>
<img class="image" src="https://placekitten.com/100/100" />
<img class="logo" src="https://placekitten.com/50/50" />
<div class="text">
Vishwakarma Institute of Information Technology
</div>
</b-list-group-item>
<b-list-group-item>Anvay Joshi</b-list-group-item>
<b-list-group-item>Computer</b-list-group-item>
<b-list-group-item>A-1103</b-list-group-item>
<b-list-group-item>30-11-1997</b-list-group-item>
<b-list-group-item>anvay.joshi#viit.ac.in</b-list-group-item>
<b-list-group-item>9766583977</b-list-group-item>
</b-list-group>
<b-button href="#" variant="primary">QR Code</b-button>
</b-card>
</div>
</div>

Created a custom xtype component in one app, trying to copy it to different app not working unless I have the original app in AEM CD5

I have created Multifield dialog i AEM 5.6.1 and wold like to know How do I make an AEM CQ5 component responsive? fit to different devices/screens based on users viewpoint??
Better way for responsive design is CSS3 #media Rule.
In the following snippet menu for devices with width < 500 will be 100% width of screen:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
font-family: "Lucida Sans", Verdana, sans-serif;
}
.main img {
width: 100%;
}
h1{
font-size: 1.625em;
}
h2{
font-size: 1.375em;
}
.header {
padding: 1.0121457489878542510121457489879%;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.310344827586206896551724137931%;
margin-left: 0;
margin-top: 0;
padding: 4.310344827586206896551724137931%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.0661157024793388429752066115702%;
}
.right {
padding: 4.310344827586206896551724137931%;
background-color: #CDF0F6;
}
.footer {
padding: 1.0121457489878542510121457489879%;
text-align: center;
background-color: #f1f1f1;
border: 1px solid #e9e9e9;
font-size: 0.625em;
}
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2.0242914979757085020242914979757%;
margin-right: 2.0242914979757085020242914979757%;
float: left;
}
.gridheader {
width: 100%;
}
.gridmenu {
width: 23.481781376518218623481781376518%;
}
.gridmain {
width: 48.987854251012145748987854251012%;
}
.gridright {
width: 23.481781376518218623481781376518%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
#media only screen and (max-width: 500px) {
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1.0121457489878542510121457489879%;
padding: 1.0121457489878542510121457489879%;
}
.gridmain {
width: 100%;
}
.main {
padding: 1.0121457489878542510121457489879%;
}
.gridright {
width: 100%;
}
.right {
padding: 1.0121457489878542510121457489879%;
}
.gridbox {
margin-right: 0;
float: left;
}
}
</style>
</head>
<body>
<div class="gridcontainer">
<div class="gridwrapper">
<div class="gridbox gridheader">
<div class="header">
<h1>The Pulpit Rock</h1>
</div>
</div>
<div class="gridbox gridmenu">
<div class="menuitem">The Drive</div>
<div class="menuitem">The Walk</div>
<div class="menuitem">The Return</div>
<div class="menuitem">The End</div>
</div>
<div class="gridbox gridmain">
<div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="http://www.w3schools.com/cssref/pulpitrock.jpg" alt="Pulpit rock" width="" height="">
</div>
</div>
<div class="gridbox gridright">
<div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
</div>
</div>
<div class="gridbox gridfooter">
<div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
</div>
</div>
</div>
</div>
</body>
</html>
See more in fo in the following page

Fancybox not stretching when using to display form

I want to display a simple form inside fancybox overlay, which also works nice on smaller screen. i've set up an example on here http://design.imago.ee/test/fancybox-form/index1.html
Initially i set the form width to be 450px, at 620px screen size im setting the form width to 100% and after i have done it, fancybox window collapses width wise and the form is not displayed properly. Interestingly that doesnt happen with regular text content (second button in the example). I know that i could just change the width manually with media queries, but it isnt really a good solution. Can anyone help? Thank you.
It's not very elegant solution but will give you an idea and porbably put you closer to your goal
Change in fancybox css
.fancybox-inner {
overflow: hidden !important;
}
Script
Calculate width of window and adjust the width of content, use setInterval so any change in width will be adjusted dynamically.
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
Demo
$(document).ready(function () {
$('.fancybox').fancybox({
padding: 0,
helpers: {
overlay: {
locked: false
},
title: {
type: 'inside'
}
}
});
setInterval(dimension, 100);
function dimension() {
$('.content').css('width', $(window).width() * 0.6);
}
});
.fancybox-inner {
overflow: hidden !important;
}
* {
margin: 0;
padding: 0;
}
/* =========================== Layout styles =================== */
body, html {
height: 100%;
}
body {
font: 14px/1.4'Open sans', sans-serif;
overflow: hidden;
background-color: #fff;
padding: 20px 4%;
}
.centered-wrap {
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
a.fancybox {
display: inline-block;
vertical-align: top;
background-color: #59a3d3;
color: #fff;
padding: 4px 7px;
border-radius: 2px;
text-decoration: none;
}
h1 {
font-size: 23px;
font-weight: 600;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
.content {
padding: 20px 30px;
}
input[type="text"] {
border: 1px solid #ccc;
height: 30px;
font: 13px/30px'Open sans', sans-serif;
box-sizing: border-box;
width: 100%;
padding: 0 7px;
}
#form {
width: 450px;
padding: 30px;
}
#form .row {
margin-bottom: 10px;
}
#form .col {
float: left;
}
#form .col1 {
width: 25%;
}
#form .col2 {
width: 75%;
}
#form label {
display: inline-block;
vertical-align: top;
padding: 6px 10px 0 0;
}
/* ======================= media queries ======================= */
#media screen and (max-width: 620px) {
#form {
width: 100%;
text-align: center;
padding: 5px;
}
#form .col {
float: none;
width: auto;
text-align: center;
margin-right: 10px
}
#form label {
}
}
/* ======================== clearfix =========================== */
/* Force Element To Self-Clear its Children */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content:" ";
clear: both;
height: 0;
}
.clearfix {
display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* close commented backslash hack */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<div class="centered-wrap">
<p><a class="fancybox" href="#form">Fancybox with form</a></p>
<div style="display: none;">
<div id="form" class="content">
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
<div class="row clearfix">
<div class="col col1">
<label>Form label</label>
</div>
<div class="col col2">
<input type="text">
</div>
</div>
</div>
</div>
</div>
Fiddle Example
Note: Adjust the fiddle view screen to see how form width adjust itself with the change of screen size.

Column with div style and div id

For some reason I cannot get the text in my middle column (of three columns) to respond to any classes or styles I apply to it. I'm just trying to slide the text in the middle column over to the right a little bit.
CSS (stylesheet):
#footer-address {
font-size:20px;
padding-left:20px;
}
#nav-foot{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0px;
text-align:left;
font-size:12px;
}
#nav-foot li{
display:inline;
}
#nav-foot a{
display:inline-block;
padding:20px 0 20px 0;
}
#nav-social {
border:1px solid #ccc;
border-width:1px 0;
display:inline;
list-style:none;
margin:0;
padding:0px;
float: left;
}
#nav-social li{
display:inline;
}
#nav-social a{
display:inline-block;
padding:20px 0 20px 0;
}
HTML:
<div style="width:30%; float:left; margin: 10px 0 10px 0; position:relative;">
<ul id="nav-foot">
<li>About Us</li>
<li>Jobs</li>
<li>Contact Us</li>
</ul>
</div>
<div id="footer-address" style="width:30%; float:left; margin: 10px 20px 10px 20px; position:relative;">
375 6th St. </br>
Atlanta, GA 30308 </br>
Phone: 404-981-3934 </br>
Email: admin#perimetermaids.com
</div>
<div style="width:30%; float:left; margin: 10px 0 10px 0; position:relative;">
<ul id="nav-social">
</i>
<li></i></li>
<li></i></li>
<li></i></li>
<li></i></li>
</ul>
</div>
Sorry if the code is sloppy or the formatting of my question, however, I'm really scratching my head as to why this won't work.
My URL is http://perimetermaids.com/test if anybody needs that as well. This is for the black footer area. Thanks for the help, and hope you all have an awesome weekend!

How can I create outound links in Smooth Animated Menu with jQuery?

I am using a very cool jquery drop down menu by Zach at One Mighty Roar. I cannot get this to link to let's say, a Facebook page in a new window. The js file is below:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
The html is below:
<div id="nav">
<ul class="tabNav">
<li><img src="../images/facebook.png" alt="Check out our Facebook page!" width="36" height="36" border="0" /></li>
<li>FTP Site</li>
<li>Contact</li>
<li>Services</li>
<li class="current">Projects</li>
</ul>
<div class="tabContainer">
<div class="tab"><p>Click here to be taken to our Facebook page.</p></div>
<div class="tab"><p>Click here to be taken to our ftp site to download your documents.</p></div>
<div class="tab">Contact Info</div>
<div class="tab">Services Info</div>
<div class="tab current">Projects Info</div>
</div>
The css:
/* MENU */
ul.tabNav {
list-style: none;
width: 100%;
float: left;
}
ul.tabNav li {
float: right;
margin: 0;
}
.tab.current ul li {
list-style-type: none;
margin-left: 15px;
line-height: 1.5em;
}
.tabNav li a img {
margin-top: 15px;
}
ul.tabNav li.current {
}
ul.tabNav a {
color: #FFF;
display: block;
height: 66px;
padding: 10px;
text-decoration: none;
width: 66px;
margin-left: 4px;
font-size: 16px;
border: 1px solid #FF9933;
text-align: center;
font-weight: normal;
text-transform: lowercase;
font-family: "Century Gothic";
letter-spacing: 1px;
line-height: 60px;
}
ul.tabNav li.current a {
padding: 10px;
}
div.tabContainer {
clear: both;
float: right;
width: 500px;
z-index: 9999;
}
div.tabContainer div.tab {
border: 1px solid #FF9933;
color: #FFF;
display: none;
padding: 10px;
background-image: url(images/slideshow_bg.png);
background-repeat: repeat;
margin-top: 14px;
height: 500px;
}
div.tab p:last-child { margin-bottom: 0; }
.tabContainer .tab { display: none; }
I have tried adding my http:// up in the tabNav AND/OR the tabContainer sections and I cannot link out. Frustrating.
Have you tried:
Click here to be taken to our Facebook page.
You can also set other attributes. Check out the documentation and examples here: http://www.w3schools.com/jsref/met_win_open.asp